Material design icon vertical-align

[Sankar]

Is there is a better way to position the material design icons properly? Or how can I solve the issue of the underline being drawn at the incorrect position?

a {
text-decoration: underline;
}

a:before {
content: "\E315";
font-family: 'Material Icons';
vertical-align: bottom;
}

[Heisenberg]

You could rebuild the text-decoration: underline within the pseudo :after element using border-bottom.

Here is an example.

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');


a {
text-decoration: none;
position: relative;
}

a:before {
content: "\E315";
font-family: 'Material Icons';
vertical-align: bottom;
}

a:after {
content: "";
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}
<a href="#">underline, icon v-align bottom</a>