positioning custom checkbox icon

I made a custom checkbox whit css. For the checked icon i use google's material icons. Now the only problem is the icon is not vertically centerd. How do i do that?

html:

<input type="checkbox" id="remember">
<label for="remember">Angemeldet bleiben</label>

CSS:

/* Basic Styling
----------------------------------------------------------------------------------------------------*/

input[type="radio"],
input[type="checkbox"] {
  display: none;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
  margin-right: 20px;
  padding-left: 30px;
  cursor: pointer;
  display: inline-block;
  position: relative;
}

input[type="radio"] + label:before,
input[type="checkbox"] + label:before,
input[type="radio"] + label:after,
input[type="checkbox"] + label:after {
  width: 20px;
  height: 20px;
  content: '';
  top: 0;
  left: 0;
  color: #fafafa;
  text-align: center;
  position: absolute;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

/* Radios
----------------------------------------------------------------------------------------------------*/

input[type="radio"] + label:before {
  border: 1px solid #eee;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #fafafa;
}

input[type="radio"] + label:hover:before {
  border: 1px solid #eee;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #eee;
}

input[type="radio"]:checked + label:before {
  border: 1px solid #2196F3;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #2196F3;
}

/* Checkboxes
----------------------------------------------------------------------------------------------------*/

input[type="checkbox"] + label:before {
  font-family: 'Material Icons';
  font-size: 18px;
  content: '\E876';
  border: 1px solid #eee;
  border-radius: 2px;
  background: #fafafa;
}

input[type="checkbox"] + label:hover:before {
  color: #eee;
}

input[type="checkbox"]:checked + label:before {
  color: #2196F3;
}

Here is what it looks like: