图标字体下出现意外填充

Question

我使用了Google's material icons，但图标下方有一个不需要的填充。为什么会出现这种情况？如何更正？

.message-text {
  background-color: teal;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="message-text">
  <span class="constellation">
        <i class="material-icons active">star</i>
        <i class="material-icons inactive">star</i>
        <i class="material-icons inactive">star</i>
        <i class="material-icons inactive">star</i>
        <i class="material-icons inactive">star</i>
  </span>
</div>