This works for me. I'm not sure if I need all of the files:
<style>
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(Material-Icons-Baseline.eot); /* For IE6-8 */
src: local('Material-Icons-Baseline'),
url(Material-Icons-Baseline.woff2) format('woff2'),
url(Material-Icons-Baseline.woff) format('woff'),
url(Material-Icons-Baseline.svg) format('svg'),
url(Material-Icons-Baseline.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: white; /* I wanted mine to be always white */
font-size: 32px; /* I changed this from 24 */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}