Missing Codepoints
Tags: materialicons, showdev, ember, opensource
Published: 2018-07-22 12:30:29

---
title: Missing Codepoints
published: true
description: How I found missing Google Material Icons in 1 day
tags: Material Icons, showdev, Ember, open-source
cover_image: https://thepracticaldev.s3.amazonaws.com/i/v1c5e597b0perkofxfcy.png
canonical_url: https://crunchingnumbers.live/2018/07/21/missing-codepoints
---

*Originally posted on [crunchingnumbers.live](https://crunchingnumbers.live/2018/07/21/missing-codepoints)*

As a Saturday project, I unearthed the missing codepoints from Material Icons and made [a pull request for Google](https://github.com/google/material-design-icons/pull/828).


## Problem:

Thanks to a recent update, developers and designers have about 100 additional icons to use in their projects. Unfortunately, they can no longer find the codepoints on [the official website](https://material.io/tools/icons/?style=baseline), only the icon names. To make matters worse, [the codepoints file on Google’s repo](https://github.com/google/material-design-icons/blob/ac75e8329cc936816f1c5e2de182858efe7530ab/iconfont/codepoints) hasn’t been updated to show the new icons.


Personally, I need to know these values to render icons in D3. Having a website that shows both codepoints and icon names helps me save time. There seem to be many others who also need to know both.

![There are many open issues on Google’s repo asking for codepoints to be updated.](https://crunchingnumbersdotlive.files.wordpress.com/2018/07/github_issues.png)

<figcaption>There are many open issues on Google’s repo asking for codepoints to be updated.</figcaption>


## Solution:

To solve this problem, I created an Ember app that finds all icons in 3 steps: (1) render each value from **e000** to **efff** (4096 possibilities) as an icon; (2) get the element width (= 24px if icon is defined, < 24px otherwise), and (3) remove elements that aren’t icons. Because I was updating the DOM many times, the search was rather a slow task.

Once finished, I had *1036 codepoints*. I knew how to map 932 of them to an icon name from [the existing codepoints file](https://github.com/google/material-design-icons/blob/ac75e8329cc936816f1c5e2de182858efe7530ab/iconfont/codepoints). I had to find out the icon name for *the missing 104*.

![Google’s codepoint file listed 932 icons but was missing 104 icons.](https://crunchingnumbersdotlive.files.wordpress.com/2018/07/existing_codepoints1.png)

<figcaption>Google’s codepoint file listed 932 icons but was missing 104 icons.</figcaption>


In most cases, I was able to find the icon name from [the website](https://material.io/tools/icons/?style=baseline). The manual search, again, was slow and made me wish that I could search by drawing the icon, like [I can with LaTeX symbols](http://detexify.kirelabs.org/classify.html). In 15 instances, the website didn’t list the icon, so I had to guess the icon name, much akin to [guessing a password](https://crunchingnumbers.live/2016/11/18/passwords-part-1/).

Guessing turned out to be somewhat fun. It helped that, oftentimes, Google (1) uses a specific range for an icon category, (2) assigns new icons to a category and a codepoint in the correct range, and (3) follows a naming convention (be straightforward and use words such as **_add**, **_circle**, or **_outline** to describe the looks).

In the end, I was able to find the codepoints and icon names for *97 out of 104* missing icons. Feel free to check all icons at [https://material-icons.herokuapp.com/](https://material-icons.herokuapp.com/).

![Material Icons has 1036 icons](https://crunchingnumbersdotlive.files.wordpress.com/2018/07/all_codepoints.png)


### Notes
You can find the code in its entirety here:

[Download from GitHub](https://github.com/ijlee2/material-design-icons-codepoints)