Align material icon vertically

Try this

.material-icons {
    vertical-align: 1px; /*Change this to adjust the icon*/
}

Second option is you can use is:

.material-icons {
    position: relative;
    top: 1px; /*Change this to adjust the icon*/
}

What you are doing wrong

There is css rule for icon: font-size:24px which is greater than the parent anchor element and line height is 1 so resulting line height is 24px; that's why it was not working. If you want you can use your own code just change the line-height equal to parent anchor element and use vertical-align:middle for icon

See Js Fiddle

.material-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

You might have tried various styling to arrange your icons, but you need to target your icons i.e. i tag as below and style,

.footer-links > li > a > i{
  vertical-align:middle;
} 

Check this two jsFiddle, I have added background to one just for understanding purpose.

https://jsfiddle.net/dbwaoLrh/2/

https://jsfiddle.net/dbwaoLrh/4/