Using HTML tag with nested text to render icon

Question

In most CSS frameworks that have icon fonts have implementation examples like:

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

source: Material Icons

I also know that this will work as well:

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

The latter example makes sense to me logically because the CSS framework's stylesheet has classnames that apply a :before pseudo element and its content attribute set to the unicode value (as well as other boilerplate).

My question is on a high level does the browser render the first example?

It seems to me that there is a relationship between the class material-icons and the icon name nested under it as text and I'd like to know where and how that is being established.

Yea, that was my example but it's the same for almost all the CSS frameworks — Ephapox, Mar 14 '19 at 18:08

Amessihel · Accepted Answer · 2019-03-14T18:37:43.727

Since your example is taken from Material Icons, I'll answer to your question in this scope.

On a high level does the browser render the first example?

Let's start from the beginning:

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

Here, they use a <i> element for icons (not a good idea). A CSS class is also set, material-icons. Material Icons are designed in this CSS link:

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

Let's have a look on how this material-icon class is designed:

.material-icons {
  font-family: 'Material Icons'; /* [...] */
}

"Material Icons" is a custom font, described in the same resource:

@font-face {
  font-family: 'Material Icons';
  /* [...] */
  src: url(https://fonts.gstatic.com/s/materialicons/v46/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

So you end up with the text "share" displayed in a custom font, and that's the key of this feature. This is not an unicode character nor a "real" icon (SVG or bitmap), but an entire text displayed in a specific font to render it as an icon.

For example, in the below snippet, try to select "a part" of share icon, and you'll figure out this is actually the word "shared", drawn character per character. Copy and paste it elsewhere to see it. For example, the left spot stands for h.

@font-face {
  font-family: 'Material Icons';
  src: url(https://fonts.gstatic.com/s/materialicons/v46/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-size:24px;
}

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

Using HTML tag with nested text to render icon

1 Answers1