material-icons/demo.html

Material design icon font and CSS framework for self hosting the icons.

---
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;
  }

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

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

</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)

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

    try {
      anchors.add()
    } catch (e) {
      console.error(e)
    }
  }

  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.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 codepoints = "{{ "/iconfont/codepoints.json?v=" | append: site.github.build_revision | relative_url }}"

  fetch(codepoints).then((res) => res.json()).then(render)
})()
</script>

<style type="text/css">

  /**
   * see https://github.com/primer/css/blob/master/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>