引导按钮中的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>

但我想有一个更好的办法。这只是我们想到的第一件事情。