How to preview material icons and private use area glyphs
- Step 1Upload the Material font — Drop `MaterialIcons-Regular.ttf`, a Material Symbols `.woff2`, or your custom PUA icon font. Supported: TTF, OTF, WOFF, WOFF2.
- Step 2Let it embed and render — The font is parsed with opentype.js and re-embedded as an `@font-face` (`font-display: block`) in your browser. The header line reports encoded-glyph count.
- Step 3Browse the grid — Each cell is one codepoint-bearing glyph at 28px with a `U+XXXX` caption. Ligature-only glyphs (no codepoint) won't appear — that's expected for Material.
- Step 4Find your icon by sight — There's no name search; scan visually. Hover a cell for the glyph name (when the `post` table is present) plus the codepoint and CSS escape.
- Step 5Read and convert the codepoint — `U+E88A` → CSS `content: "\e88a"`, HTML ``. Use these when you need direct addressing instead of the ligature.
- Step 6Audit your subset — Compare the cells you see against the icon names you intended to keep. A missing cell or an empty box means the subset dropped that glyph.
Material access methods vs what this tool shows
Material can be driven by ligature OR by codepoint. The previewer only surfaces the codepoint path, because that's the only one with a value to read.
| Access method | Example | Shown in the grid? | Why |
|---|---|---|---|
| Ligature | <i class="material-icons">home</i> | Only if the glyph also has a codepoint | Pure ligature targets have unicode == null |
| Codepoint in CSS | content: "\e88a" | Yes | It has a cmap entry to render |
| HTML entity |  | Yes | Same codepoint, entity form |
| Glyph name | home | Hover tooltip, if post kept | Read from the post table |
Private Use Area blocks
Where icon fonts live. Material and most custom sets use the BMP PUA. The previewer renders any codepoint the font encodes, in or out of these ranges.
| Block | Range | Codepoints | Typical use |
|---|---|---|---|
| BMP PUA | U+E000–U+F8FF | 6,400 | Material Icons, Font Awesome, most custom sets |
| Supplementary PUA-A | U+F0000–U+FFFFD | ~65,534 | Large or overflow icon systems |
| Supplementary PUA-B | U+100000–U+10FFFD | ~65,534 | Rarely; very large private mappings |
| Outside PUA | any encoded codepoint | — | Latin letters etc. if the font includes them |
Cookbook
Working with Material and PUA codepoints once the grid gives you the value. Codepoints below are illustrative — read your file's captions.
Material icon by codepoint instead of ligature
ExampleWhen you can't ship the ligature (e.g. text gets sanitised), address the glyph by its codepoint read from the grid.
/* grid caption for the home icon: U+E88A */
.icon-home::before {
font-family: "Material Icons";
content: "\e88a";
}HTML entity fallback
ExampleDrop the glyph inline without relying on the ligature engine.
<!-- U+E88A --> <i class="material-icons" aria-hidden="true"></i>
Audit a subset against your icon list
ExampleYou subset Material to 24 icons. Preview the output and count cells to confirm all 24 survived.
Intended: 24 icons Grid header: "Showing 24 of 24 encoded glyphs" -> good Grid header: "Showing 21 of 21 encoded glyphs" -> 3 dropped: find which codepoints are missing vs your list
Catch a tofu box from an over-subset
ExampleA cell renders as □ — the codepoint stayed in the cmap but the outline was stripped. The icon is effectively gone.
Expected the settings icon at U+E8B8 -> cell present, renders as □ -> outline missing in this subset -> re-subset keeping that glyph's outline
Find a custom PUA icon's codepoint
ExampleYour in-house font assigned icons starting at U+E000. Preview it to learn which codepoint maps to which picture.
1. Upload icons.woff2 2. Cells appear from U+E000 upward 3. Match the picture to its U+ caption 4. Use that codepoint in your CSS / docs
Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
Material icon you use daily is missing from the grid
Expected — ligature-only glyphIf the icon is only reachable by ligature and has no direct codepoint, it has unicode == null and is skipped. Material Symbols in particular lean on ligatures. The grid shows the codepoint path only; that's the only path with a value to read.
Glyph name absent on hover
Expected — no post tableMaterial .woff2 builds often strip the post table. Without it, the hover tooltip shows only the codepoint and CSS escape. The codepoint is what you need for content:, so this is non-blocking.
Cell renders as an empty box
Codepoint present, outline missingAn over-aggressive subset can keep the cmap entry but drop the outline. The previewer paints the truth: a □ means the glyph is gone. Re-subset and keep that glyph with a font subsetter.
Upload a .ttc collection
Unsupported font formatCollections (ttcf magic) aren't supported — only ttf/otf/woff/woff2. Extract the single Material face you want first.
Font exceeds 1500 encoded glyphs
Capped at 1500 shownA full Material Symbols build can hold thousands of glyphs; the grid shows the first 1500 and reports the total. Subset to your used icons first for a complete view of your set.
Expecting click-to-copy of the codepoint
No copy handlerThe grid is static HTML/CSS with no JavaScript. Read the U+ caption or hover for the CSS escape and type it. There is no copy script even though the cell shows a copy cursor.
Latin letters appear among the icons
Expected if encodedIf your font includes encoded Latin or punctuation glyphs (some Material variants do), they show up alongside icons because they also have codepoints. Material Icons-Regular usually omits them.
Over the tier size limit
Rejected — exceeds tier limitThe per-job file-size gate applies even though the tool is free: 5 MB Free / 50 MB Pro / 1 GB Developer. The uncompressed Material .ttf can be large — prefer the .woff2.
Frequently asked questions
Why don't all my Material icons appear?
Material icons are often accessed by ligature, and a ligature-only glyph may have no direct codepoint. Those are skipped because content: can't address them. Only codepoint-bearing glyphs are shown.
Why does a generic character map show blanks for Material?
Material's icons live in the Private Use Area (U+E000–U+F8FF), which has no standard glyphs. A generic viewer doesn't have your font; this previewer embeds it, so the icons render.
How do I use a Material icon by codepoint?
Read the U+XXXX caption and write content: "\e88a" (lower-case, leading zeros trimmed) or the HTML entity . That bypasses the ligature engine.
Can I confirm a subset kept all my icons?
Yes — the header reports 'Showing N of N encoded glyphs'. Compare N to your intended icon count, and watch for cells that render as empty boxes (outline dropped).
What does an empty box in a cell mean?
The codepoint is still in the cmap but the glyph outline was removed — usually by an over-aggressive subset. Re-subset keeping that glyph with the font subsetter.
Is there a search-by-name box?
No. The grid is visual; hover gives the name when the post table is present. For programmatic per-glyph data use the glyph inspector.
Does it read Material's .woff2?
Yes — WOFF2 is Brotli-decompressed in the browser. WOFF, TTF, and OTF are also supported.
Is the font uploaded anywhere?
No. Parsing and rendering happen entirely client-side, which matters for unreleased internal icon sets.
Can it export PNGs or a sprite?
No. It produces one HTML grid. For per-glyph SVG paths and thumbnails, use the glyph inspector.
What about Material Symbols variable font?
It renders, but Symbols leans heavily on ligatures, so many glyphs without direct codepoints won't appear. You'll see only the codepoint-addressable subset.
How many glyphs can it show, and how do I get the full count?
The grid shows up to 1500 encoded glyphs (the header reports the true total). For a numeric breakdown use the glyph-count analyzer; for which Unicode blocks are covered use the character coverage map.
I want to assign codepoints to my own icon names — is that here?
No. This reads codepoints from an existing font. To assign PUA codepoints to a name list and generate CSS, use the PUA point assigner, then preview the build here.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.