30: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 }31:[] 2e:{"title":"MDI","cells":[{"id":0,"value":"md`# MDI\n\n## Material Design Icons`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":40,"value":"viewof search = text({placeholder: \"Search\", description: \"Filter icons\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"Icon = (icon, size = 24, color = 'currentColor') => html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import { slider, text } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"mdijs = require('https://bundle.run/@mdi/js@5.0.45')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}