28:null 29:["$","title",null,{"children":"MDI | Eli Sklar | Observable"}] 2e:T550,viewof selected = { let selected = '' let cont = html`

` const itemsCont = html`

` const getItems = () => html`

${Object.keys(mdijs) .filter(k => search ? (new RegExp(search.toLowerCase().replace(/[^a-z0-9]/ig, ''), 'i')).exec(k) : true).map(k => { const elm = html`${Icon(k.replace(/^mdi/, ''), iconsSize)}` elm.onclick = () => { updateSelected(k) } return elm })}

` const updateSelected = (key) => { cont.value = key console.log('updating to:', key) if (itemsCont.lastChild) itemsCont.removeChild(itemsCont.lastChild) const items = getItems() itemsCont.append(items) cont.dispatchEvent(new CustomEvent("input")); } cont.append(itemsCont) const items = getItems() itemsCont.append(items) const style = html`` cont.append(style) cont.value = selected return cont }2f:[] 2c:{"id":"14154653d7500a8f","slug":"mdi","title":"MDI","thumbnail":"d3e9f575db4d2db98ef26f1c77c6435448d56e34b5070c7435df6f790f0ed2b0","access_level":"public","create_time":"$D2020-03-29T12:18:44.817Z","update_time":"$D2020-03-29T21:07:50.884Z","view_time":null,"first_public_time":"$D2020-03-29T12:19:05.383Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"fbb4864ef287fcdf","login":"elisk","name":"Eli Sklar","avatar_url":"https://avatars-next.observableusercontent.com/b003318f84dbe2ec65499058a95a570f97a3e5893e6b2fc98ea9f3520119fbe9","tier":"starter_2024"},"version":115,"publish_version":115,"role":null,"authored":false,"authors":[{"type":"individual","id":"476d6f963f3363b3","login":"elisk","name":"Eli Sklar","avatar_url":"https://avatars-next.observableusercontent.com/b003318f84dbe2ec65499058a95a570f97a3e5893e6b2fc98ea9f3520119fbe9","tier":null}],"members":[{"type":"individual","id":"476d6f963f3363b3","login":"elisk","name":"Eli Sklar","avatar_url":"https://avatars-next.observableusercontent.com/b003318f84dbe2ec65499058a95a570f97a3e5893e6b2fc98ea9f3520119fbe9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bec1637df9e62c60","slug":"observable","title":"Observable","owner":{"id":"fbb4864ef287fcdf","login":"elisk","name":"Eli Sklar"}},"type":"notebook","body":{"title":"MDI","cells":[{"id":0,"value":"md`# MDI\n\n## Material Design Icons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`# How to use\n\nImport icon from this notebook, and use it like so: Icon(Icon name)\n\ne.g.\n\n\\`\\`\\`js\nimport { Icon } from '@elisk/mdi'\n\nviewof withIcon = Icon('${(selected || 'ThumbUp').replace(/^mdi/, '')}', ${iconsSize}, 'orangered')\n\\`\\`\\`\n\n// withIcon = ${Icon((selected || 'ThumbUp').replace(/^mdi/, ''), iconsSize, 'orangered')}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"selected ? md`\nSelected icon: ${Icon(selected.replace(/^mdi/, ''), 16)}\n\n${selected.replace(/^mdi/, '')}\n\n10: ${Icon(selected.replace(/^mdi/, ''), 10)} — 16: ${Icon(selected.replace(/^mdi/, ''), 16)} — 24: ${Icon(selected.replace(/^mdi/, ''), 24)} — 32: ${Icon(selected.replace(/^mdi/, ''), 32)} — 48: ${Icon(selected.replace(/^mdi/, ''), 48)} — 64: ${Icon(selected.replace(/^mdi/, ''), 64)} — 96: ${Icon(selected.replace(/^mdi/, ''), 96)}\n` : md`Select icon from below...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"viewof iconsSize = slider({\n min: 9, \n max: 128, \n step: 1,\n value: 18,\n format: v => `${v}px`,\n description: \"Icon size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof search = text({placeholder: \"Search\", description: \"Filter icons\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Icon = (icon, size = 24, color = 'currentColor') => html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import { slider, text } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"mdijs = require('https://bundle.run/@mdi/js@5.0.45')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"