index.html

<input id="query" name="query">

<div id="results">
    <div class="warn">
        Type something to start looking for icons!
    </div>
</div>


<style>
    input#query {
        width: 75%;
        height: 30px;
        top: 15px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        outline: none;
        box-shadow: none;
        border: 1px solid #000000;
    }

    div.warn {
        text-align: center;
        font-size: 6em;
        color: #444;
        font-family: sans-serif;
        font-weight: bold;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
    }

    div#results {
        margin-top: 60px;
        display: flex;
        flex-flow: wrap;
    }
    
    div.result {
        flex-basis: 0;
        min-width: 120px;
        padding: 4px 8px;
        flex-grow: 1;
        text-align: center;
        cursor: copy;
        display: flex;
        flex-flow: column;
    }

    div.icon {
        font-size: 64px;
        font-family: 'Material Design Icons';
        color: #000000;
    }

    div.label {
        font-size: 14px;
        font-family: monospace;
        color: #444444; 
    }

    @media screen and (prefers-color-scheme: dark) {
        input {
            background-color: #222222;
            color: #eeeeee;
            border: 1px solid #eeeeee;
        }

        body {
            background-color: #000000;
        }

        div.icon {
            color: #dddddd;
        }

        div.label {
            color: #aaaaaa;
        }
    }
</style>

<script src="icons.js"></script>
<script>
    const MAX_ICONS = 200

    const iconNames = Object.keys(mdiIcons)
    function buildNodesFromResults(results) {
        return results.map((result) => {
            let container = document.createElement('div')
            container.classList = 'result'
            container.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopImmediatePropagation();

                navigator.clipboard.writeText(result.icon);
            })
            let iconContainer = document.createElement('div')
            iconContainer.classList = 'icon';
            iconContainer.innerText = result['icon']
            let labelContainer = document.createElement('div')
            labelContainer.classList = 'label'
            labelContainer.innerText = result['label']
            container.appendChild(iconContainer)
            container.appendChild(labelContainer)
            return container;
        })
    }

    function search(query) {
        query = query.trim().replace(/ /g, '-');
        // TODO: add sorting
        let nameResults = iconNames.filter((val) => val.indexOf(query) !== -1)
        if (nameResults.length > MAX_ICONS) nameResults = nameResults.slice(0, MAX_ICONS)
        nameResults.sort((a,b) => {
            return a.indexOf(query)
        })
        return nameResults.map((label) => ({label, icon: String.fromCodePoint(parseInt(mdiIcons[label], 16))}))
    }

    var input = document.getElementById('query');
    var resultsContainer = document.getElementById('results')
    input.addEventListener('keyup', function() {
        let results = search(input.value);
        let nodes = buildNodesFromResults(results);
        while (resultsContainer.firstChild) resultsContainer.removeChild(resultsContainer.firstChild)
        if (nodes.length === 0) {
            let notFound = document.createElement('div')
            notFound.classList = 'warn';
            notFound.innerText = 'No icons matching your query have been found'
            resultsContainer.append(notFound)
        } else {
            resultsContainer.append(...nodes)
        }
    })

    window.addEventListener('keydown', (e) => {
        input.focus();
    })

</script>