引導按鈕中的Google素材圖標對齊

Question

如何在我的引導按鈕中正確對齊Google素材圖標？

例如，考慮下面的代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 

 
<!-- body --> 
 
<button type="button" class="btn btn-danger btn-sm"> 
 
    <span class="material-icons">delete</span> Supprimer 
 
</button>

給了我這樣的輸出：

這是不是很好的輸出。修復圖標和文本之間的對齊方式的最佳解決方案是什麼？

Answer 1

你可以做這樣的事情（按鈕內嵌樣式）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 

 
<!-- body --> 
 
<button style="display: flex;align-items: center;padding:5px 10px;" type="button" class="btn btn-danger btn-sm"> 
 
    <span class="material-icons">delete</span> Supprimer 
 
</button>

但我想有一個更好的辦法。這只是我們想到的第一件事情。