如何从Google的Material Design图标外部删除间距？

Question

标题：我无法消除Google的Material Design图标周围的间距，并且似乎无法在Google或Material Design图标指南上找到任何解决方案。我不确定答案是否很简单，是否想念它，还是不确定为什么我无法完成看似简单的任务呢？

在下面，您可以找到我项目中相关代码的摘录，或者，您可以在此处查看我的完整项目。

• 我的标记，

  <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”，但是据我所知，这不会对Google的Material Design图标产生影响。

---

更新（24/03/2018 01:33 UTC）：似乎Google在图像文件本身中的图标周围添加了空格，用户没有选择格式化该间距的选项。如果其他人也遇到同样的问题，我建议您使用其他图标字体，例如Font Awesome。

Answer 1

我通过应用负边距解决了这个问题。它有效......但是 Font Awesome 解决这个问题的方式非常棒，完全同意@Michael Burns。

当应用负边距时，像素将取决于图标大小和特定图标。但至少在不同浏览器中还是一致的。

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