1

I'd like to use Google's material icons https://design.google.com/icons/ as a font, but am worried about browser support. Is there a guide for what CSS, fallbacks, etc. to use? Do I need to do browser sniffing? What are the known limitations?

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

<i class="material-icons edit_icon">more_vert</i>

For ie9 and below, they say to use the below snippet, but it's blank in my IE 11's emulator for IE 9. Does it work in the actual IE9? 

<i class="material-icons">&#xE5D4;</i>

Would I need to do browser sniffing or do I just include both and browsers know to only show one?

This page lists issues with mobile https://github.com/google/material-design-icons/issues/179 as does this Why Google Material Icons Can't be Shown on Mobile. They offer different solutions.

Is there a well-tested definitive guide? Is the world just not ready for these icons to be used as a font?

Community
  • 1
  • 1
user984003
  • 28,050
  • 64
  • 189
  • 285

1 Answers1

0

Generally for browser support icon fonts are the best, they go all the way back to IE6.

Google Material Icons is using state of the art stuff that helps people with screen readers understand what the icon is, eg. icon of a face:

<i class="material-icons">face</i>

This is called a ligature and isn't as well support (IE 10) but it's still pretty good, depends on what your client/project needs. Previously we used aria-hidden to stop screen readers from saying the id of the icon. Here is an article that may be useful further reading.

GeorgeButter
  • 2,521
  • 1
  • 29
  • 47