Google材质图标使用太多空间

Question

我正在创建自己的网站，并且遇到一些CSS问题。

如您所见，您可以看到chrome表示i.material-icons的大小为30x30。 但是，i.material-icons的实际大小与蓝色方块相同。

我尝试多次修改我的代码，问过几个人，但找不到答案。

我在下面添加了#content，.material-icons和.panel，＃panel-wrapper的CSS代码和位置。

谢谢。

P.S。请不要告诉我使用jQuery，除非没有jQuery没有办法。我希望只用CSS来解决这个问题。

#content
{
    background-color: #ffffff;
    padding: 10px;
    margin: 10px auto 10px auto;
    width: calc(100% - 100px);
}

#content > #panel-wrapper
{
    display: block;
    height: 30px;
}

/* this will show article url when readmode=true */
#content > #panel-wrapper > .article-url
{
    position: absolute;
    display: inline-block;
    left: calc((100% - (100% - 100px)) / 2);
    height: 30px;
    width: calc(100% - 230px);
}

#content > #panel-wrapper > .panel
{
    position: absolute;
    display:inline;
    right: calc((100% - (100% - 100px)) / 2);
    height: 30px;
}

#content > #panel-wrapper > .panel > i
{
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
}