htmlcssmaterial-design

Add google material design icon in css pseudo :after content

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.

Solution

  • 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.