Refactor material icons

[kilchenmann]

Is your feature request related to a problem? Please describe.
We host the theme font (roboto) and the material icons font by our own because google's data collection (s. knora-ui/#167)

It works well for the roboto font but for material-icons we use a third party module which doesn't support schematics in ng:

The package that you are trying to add does not support schematics. 
You can try using a different version of the package or contact the package 
author to add ng-add support.

Describe the solution you'd like
We shouldn't use third party module as long better solutions exists.

Describe alternatives you've considered
Add the material-fonts to assets/fonts and expand the font.scss with the following lines:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(assets/fonts/material-icons/MaterialIcons-Regular.eot);
    /* For IE6-8 */
    src: local("Material Icons"),
        local("MaterialIcons-Regular"),
        url(assets/fonts/material-icons/MaterialIcons-Regular.woff2) format("woff2"),
        url(assets/fonts/material-icons/MaterialIcons-Regular.woff) format("woff"),
        url(assets/fonts/material-icons/MaterialIcons-Regular.ttf) format("truetype");
}

and in theme.scss:

@import "config";
@import "mixins";
@import "font";


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  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';
}

Additional context
http://google.github.io/material-design-icons/#icon-font-for-the-web