jquery - In CSS/JavaScript, how is this icon/font plugin implemented?

Question

Demo at Jsfiddle

http://jsfiddle.net/hc046u9u/

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

<i class="material-icons">add</i>
<i class="material-icons">replay</i>

Answer 1

It's a "trick" where the icons are implemented as composed glyphs in the font. It means that letter combinations "add" and "replay" are displayed as one character in the font, similar to how "fi" and "fl" are often represented as one character in many fonts. (See this Wikipedia article for more information.) The icons therefore don't come from CSS declarations.

You can see how it works if you apply the font to an input field: if you start typing randomly, you don't see anything because individual characters don't have a glyph assigned to them, but if you type "add" you'll see a + symbol appear.

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

<textarea class="material-icons">add remove replay</textarea>