如何从google的Material Design Icons Exterior中删除Spacing？

Question

头注。 我在删除周围的间距时遇到了麻烦 谷歌的Material Design图标但似乎在Google上找不到任何解决方案，也找不到其他的解决方案。材料设计图标指南. 我不知道是答案明明很简单，我却漏掉了，还是有更深层次的原因，让我无法完成一个看似简单的任务。

下面你可以从我的项目中找到相关代码的摘录，或者，你可以在下面找到 点击这里查看我的完整项目.

• 我的标记。

  <header class="primary-header first-header-column">
    <i class="material-icons primary-header-material-icon-first-menu">
      menu
    </i>
    <h1>
      <strong>
        Neocrypt
      </strong> 
      Network
    </h1>
    <nav class="primary-header-navigation">
  
    </nav>
  </header>
  

• 图标造型。

  .material-icons.primary-header-material-icon-first-menu {
    color: var(--primary-typeface-color);
    font-size: 48px;
  }
  

• 的标题样式，以及

  .primary-header h1 {
    text-align: center;
    color: var(--primary-typeface-color);
    display: inline;
    font-family: var(--primary-typeface);
    font-size: 60px;
    line-height: 150px;
  }
  

• 引用的变量（无关）。

  :root {
    --primary-typeface-color: #ffffff;
    --primary-typeface: 'Lato', sans-serif;
  }
  

我希望图标能直接出现在标题旁边，图标周围没有填充，这样我就可以自己在元素周围添加间距，几乎就像重新设置一样。我试过使用 padding: 0px;然而，除了其他一些试图解决这个问题的办法外，没有任何效果。

脚注。 我正在使用 Eric Meyer的 "重置CSS"然而，据我所知，这对谷歌的Material Design图标应该没有影响。

---

更新(24032018 01:33 UTC)。 似乎谷歌在图像文件中增加了图标周围的间距，让用户无法选择格式化所述间距。如果还有人遇到同样的问题，我建议你使用其他图标字体，例如 字体真棒.

Answer 1

我解决这个问题的方法是应用 负利率. 它的工作原理......但Font Awesome解决这个问题的方式是真棒，完全同意@Michael Burns的观点。

在应用负边距的时候，px会根据图标大小和具体的图标而定。但至少在不同的浏览器中还是一致的。

.material-icons.primary-header-material-icon-first-menu {
  margin-left: -2px;
}