How to add a Google icon font to pseudo :before

Tags: css

Problem :

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.

---

Solution :

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";