CSS-按钮内的定位图标

我试图在按钮内添加一个图标。问题是，每当我添加图标时，它都会改变按钮的形状（它会使按钮更高，有时更宽，具体取决于图标的大小），并且它会错误地对齐按钮的文本，使其不再居中，而是将文本向下推

 <button>
   <i class="material-icons">weekend</i>
   Test
 </button>

---

我希望图标向左移动，同时使文本保持在按钮的中心。

嗨，这是css代码

CSS

---

希望这有帮助。

嗨，这是css代码

CSS

希望这有帮助。

---

尝试将“垂直对齐：中间”属性添加到I.材质，你应该考虑使用一个DIV而不是一个按钮，你可以从中得到相同的功能，并且它们通常在不同的浏览器上更为等价。@ TyrGrFaffy，你在哪里得到的<代码> <代码>和<代码> <代码>具有相同的功能。？Rob我说过它们可以有相同的功能

现在是一个div，可以像

一样单击和自定义。好问题RB。@ TyrgFaffayy，然后我们会讨论语义，但我会把它放在那。试试把“垂直对齐：中间”属性添加到I.材质图标中，你应该考虑使用DIV而不是按钮，您可以从中获得相同的功能，而且它们在不同的浏览器中通常更为等效。@Tylergaffanye您从哪里获得的

和

具有“相同的功能”？Rob我说它们可以具有相同的功能

现在是一个div，可以像

一样单击和自定义。“问得好，罗布。”泰勒·格法尼说，“好吧，那我们就要讨论语义学了，但我就到此为止。”。

i {
    color: #669FAB;
    font-size: 24px !important;
 }

 button {
    min-width: 100px;
 }

i {
  color: #669FAB;
  font-size: 24px !important;
  vertical-align:middle;
}

button {
  min-width: 100px;
}

button i.material-icons {
  color: #669FAB;
  font-size: 24px;
  // Add the below
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

button {
  min-width: 100px;
  // Add the below
  position: relative;
  padding: 3px 50px;
  line-height: 24px;
  text-align: center;
}