demo.html

---
layout: default
---

<link rel="stylesheet" href="{{ "/iconfont/material-icons.css?v=" | append: site.github.build_revision | relative_url }}" />

<style type="text/css">

  .demo-icon {
    display: inline-block;
    width: 98px;
    height: 98px;
    padding: 10px;
    text-align: center;
  }

  .demo-icon > span {
    font-size: 48px;
    max-width: 100%;
    overflow: hidden;
  }

  .demo-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 0;
    background-color: #fff;
  }

  .demo-search > span {
    position: absolute;
    top: calc(50% - 12px);
    left: 18px;
  }

  .demo-search input {
    display: block;
    width: 100%;
    padding: 10px 20px;
    padding-left: 50px;
    border: 2px solid transparent;
    border-radius: 50px;
    background-color: #f1f3f4;
  }

  .demo-search input:hover {
    background-color: #e9ebec;
  }

  .demo-search input:focus {
    border-color: #0366d6;
    background-color: #fff;
    outline: 0;
  }

  .text-capitalize {
    text-transform: capitalize;
  }

  .text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>

<style id="demo-search-style" type="text/css"></style>

<div id="demo-container"></div>

<script type="text/javascript">
(() => {
  const styles = ['', 'outlined', 'round', 'sharp', 'two-tone']

  const create = (tag) => document.createElement(tag)

  const getId = (className) => className ? className : 'filled'

  const getName = (className) => getId(className).replace('-', ' ')

  const render = (icons) => {
    const container = document.getElementById('demo-container')

    const heading = create('h1')
    heading.innerText = 'Available Icons'
    container.appendChild(heading)

    const nav = create('ul')
    nav.classList.add('text-capitalize')
    container.appendChild(nav)

    container.appendChild(renderSearch())

    styles.forEach((className) => {
      nav.appendChild(renderNavLink('#' + getId(className), getName(className)))
      container.appendChild(renderIcons(icons, className))
    })
  }

  const renderIcons = (icons, className='') => {
    const div = create('div')
    div.classList.add('demo-icons')

    const heading = create('h2')
    heading.classList.add('text-capitalize')
    heading.setAttribute('id', getId(className))
    heading.innerText = getName(className)
    div.appendChild(heading)

    className = className ? `material-icons-${className}` : 'material-icons'
    Object.keys(icons).forEach((icon) => {
      div.appendChild(renderIcon(icon, className))
    })
    return div
  }

  const renderIcon = (name, className) => {
    const icon = create('span')
    icon.classList.add(className)
    icon.innerText = name

    const text = create('div')
    text.classList.add('text-ellipsis')
    text.innerText = name

    const div = create('div')
    div.classList.add('demo-icon', 'tooltipped')
    div.setAttribute('aria-label', icon.outerHTML)
    div.setAttribute('data-icon', name)
    div.appendChild(icon)
    div.appendChild(create('br'))
    div.appendChild(text)
    return div
  }

  const renderNavLink = (href, text) => {
    const li = create('li')
    const a = create('a')
    a.setAttribute('href', href)
    a.innerText = text
    li.appendChild(a)
    return li
  }

  const renderSearch = () => {
    const div = create('div')
    div.classList.add('demo-search')

    const icon = create('span')
    icon.classList.add('material-icons')
    icon.innerText = 'search'
    div.appendChild(icon)

    const input = create('input')
    input.setAttribute('type', 'text')
    input.setAttribute('placeholder', 'Search')
    input.autofocus = true
    input.addEventListener('keyup', (e) => { search(e.currentTarget.value) })
    div.appendChild(input)

    return div
  }

  // see https://davidwalsh.name/javascript-debounce-function
  const debounce = (func, wait = 500) => {
    let timeout = null
    return (...args) => {
      const later = () => {
        timeout = null
        func(...args)
      }
      clearTimeout(timeout)
      timeout = setTimeout(later, wait)
    }
  }

  const search = debounce((q) => {
    q = (q || '').toLowerCase().replace(/[^a-z0-9_ -]+/g, '').trim().replace(/[ -]+/g, '_')
    document.getElementById('demo-search-style').innerText =
      q && `.demo-icon:not([data-icon*="${q}"]) { display: none; }`
  })

  // codepoints.json (generated from fonts) contains junk icons
  // so use versions.json (generated from metadata API)
  const versions = '{{ site.data.versions | jsonify }}'

  render(JSON.parse(versions))
})()
</script>

<style type="text/css">

  /* see https://github.com/primer/css/blob/main/src/tooltips/tooltips.scss */

  .tooltipped {
    position: relative;
  }

  .tooltipped::after {
    position: absolute;
    z-index: 1000000;
    display: none;
    padding: 10px;
    font: normal normal 11px/1.5 "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: break-word;
    white-space: pre;
    pointer-events: none;
    content: attr(aria-label);
    background: #000;
    border-radius: 3px;
    opacity: 0;
  }

  .tooltipped::before {
    position: absolute;
    z-index: 1000001;
    display: none;
    width: 0;
    height: 0;
    color: #000;
    pointer-events: none;
    content: "";
    border: 6px solid transparent;
    opacity: 0;
  }

  .tooltipped:hover::before,
  .tooltipped:hover::after {
    display: inline-block;
    text-decoration: none;
    opacity: 1;
  }

  .tooltipped::after {
    right: 50%;
    bottom: 100%;
    margin-bottom: 6px;
  }

  .tooltipped::before {
    top: -7px;
    right: 50%;
    bottom: auto;
    margin-right: -6px;
    border-top-color: #000;
  }

  .tooltipped::after {
    transform: translateX(50%);
  }

</style>