2d:null 2e:["$","title",null,{"children":"Material Design Icon Button | KentR | Observable"}] 33:T47e,function IconButton({ icon, iconOff, on, ...attributes }) { mdcStyles(); const _iconOn = typeof icon === "string" ? Icon(icon) : icon; _iconOn.classList.add("mdc-icon-button__icon"); const _iconOff = typeof iconOff === "string" ? Icon(iconOff) : iconOff; _iconOff && _iconOff.classList.add("mdc-icon-button__icon"); const el = html``; // Add any other attributes. Object.entries(attributes) .forEach(([ name, val ]) => el.setAttribute(name, val)); if (_iconOff) { // Add toggle class. _iconOn.classList.add("mdc-icon-button__icon--on"); // Add toggle class to root if necessary. on && el.classList.add("mdc-icon-button--on"); // Instantiate toggle. // const mdc = await import('https://cdn.skypack.dev/material-components-web@14.0.0?min'); el.toggle = new mdc.iconButton.MDCIconButtonToggle(el); } return el; }34:[] 31:{"id":"805f6a7d1fa82eb3","slug":"material-design-icon-button","title":"Material Design Icon Button","thumbnail":"2a75fea62417283bef3e7975ee9efa1f04dc9872af645f22cf5134af87e0300d","access_level":"public","create_time":"$D2022-08-13T04:03:05.621Z","update_time":"$D2022-08-20T00:46:34.080Z","view_time":null,"first_public_time":"$D2022-08-13T04:58:33.897Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0b116c76f2ee4747","login":"kentr","name":"KentR","avatar_url":"https://avatars-next.observableusercontent.com/a71a34edcdb576764acda858a882c5e4fdc007290690cf9bb3519f759390605b","tier":"starter_2024"},"version":266,"publish_version":266,"role":null,"authored":false,"authors":[{"type":"individual","id":"44febc4992049150","login":"kentr","name":"KentR","avatar_url":"https://avatars-next.observableusercontent.com/ec6b96c3369e11d4cca541530ae49db0f62e35d7da1091af6b1476425f505cf1","tier":null}],"members":[{"type":"individual","id":"44febc4992049150","login":"kentr","name":"KentR","avatar_url":"https://avatars-next.observableusercontent.com/ec6b96c3369e11d4cca541530ae49db0f62e35d7da1091af6b1476425f505cf1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"179e5667e7aa702c","slug":"material","title":"Material","owner":{"id":"0b116c76f2ee4747","login":"kentr","name":"KentR"}},"type":"notebook","body":{"title":"Material Design Icon Button","cells":[{"id":0,"value":"# Material Design Icon Button","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"## Standard button","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"IconButton({ icon: \"play_arrow\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"## Button with tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"buttonWTooltip = IconButton({ icon: \"play_arrow\", \"data-mdc-tooltip\": \"Click me\", name: \"my-button\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"// Initialize tooltips on items.\ninitTooltips([buttonWTooltip])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"## Toggle button","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"### Initially off","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"toggle1 = IconButton({ icon: \"play_arrow\", iconOff: \"pause\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"### Initially on","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"toggle2 = IconButton({ icon: \"play_arrow\", iconOff: \"pause\", on: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function Icon(iconName) {\n materialIcons();\n return htl.html`${iconName}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"import {initTooltips} from \"@kentr/material-design-tooltips\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {mdcStyles} from \"@kentr/material-components-web-styles\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"mdc = import('https://cdn.skypack.dev/material-components-web@14.0.0?min');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function materialIcons() {\n if (!document.getElementById(\"material-icons\")) {\n document.querySelector(\"head\")\n .appendChild(htl.html``);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"