Add google material design icon in css pseudo :after content

Question

I just wanted do add some of googles material design icons to the content of a link on hover:

a:hover::after {
    content: "<i class="material-icons">link</i>"
}

but it does not work, please see my fiddle.

Answer 1

Change your CSS to this:

a:hover::after {
    font-family: 'Material Icons';
    content: "link";
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}

So you can change the content: "[whatever icon here]";

FIDDLE

Also the fiddle didn't correctly load the icon font so put I placed the link in the html.