How to add a Google icon font to pseudo :before

Question

I'm using Google's material design icon fonts.

However I want to overlay one fone on top of another. The idea is to add a :before or :after element and style it something like this:

.material-icons:before
{
    position:absolute;
    content:"";
    color:@accent-color;
    font-size:2.4rem;
}

However, I'm not sure how to incorporate this: &#xE84E; into the content attribute - I'm tried a number of ways as well as using a converter on CSS tricks (which doesn't seem to work).

Any help appreciated.

Answer 1

In CSS, to specify a character you would otherwise specify in HTML with the & escape, for example; ✏, you must use the \ escape, for example, content: "\9999".

.material-icons:before {
     position: absolute;
     content: "\E84E";
     color: #882288;
     font-size: 2.4rem;
}

To end an escaped character explicitly, use another \, for example content: "\E84E\ Hello World";

Answer 2

You can achieve it by referencing the original Google Font css class which is:

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

Using SASS you can extend it and set the content using a pseudo css element:

ul
    &:before {
        @extend .material-icons;
        content: 'label';
    }
}