Add google material design icon in css pseudo :after content

Change your CSS to this:

a:hover::after {
  font-family: 'Material Icons';
  content: "link";
  -webkit-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.


C.Schubert was almost there with their answer but if you also want to have IE10+ support you need to add font-feature-settings: 'liga' 1; So the finished styling will look like this...

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

And like C.Schubert said change the content: "[whatever icon here]"; to your desired icon.