Css 将材质图标与文本对齐

我正在使用下面代码中的材质图标，但是图标有一些样式使图标与文本不对齐。你知道如何将图标与文本对齐吗

@font-face{
字体系列：“材质图标”；
字体风格：普通；
字体大小：400；
src:url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)格式（'woff2'）；
}
.材质图标{
字体系列：“材质图标”；
字体大小：正常；
字体风格：普通；
字体大小：24px；
线高：1；
字母间距：正常；
文本转换：无；
显示：内联；
空白：nowrap；
换字：正常；
方向：ltr；
-webkit字体功能设置：“liga”；
-webkit字体平滑：抗锯齿；
背景色：红色；
显示：内联；
}
.警惕{
位置：相对位置；
填充：0.75雷姆1.25雷姆；
边缘底部：1rem；
边框：1px实心透明；
边界半径：0.25雷姆；
}
.警报信息{
颜色：#0c5460；
背景色：#d1ecf1；
边框颜色：#bee5eb；
}
.警报信息人力资源{
边框顶部颜色：#abdde5；
}
.警报信息.警报链接{
颜色：#062c33；
}

面对
试验

将图标

设置为

垂直对齐：中间

我还将删除
标记，它们实际上什么都没有做


@font-face{
字体系列：“材质图标”；
字体风格：普通；
字体大小：400；
src:url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)格式（'woff2'）；
}
.材质图标{
垂直对齐：中间；/*新*/
字体系列：“材质图标”；
字体大小：正常；
字体风格：普通；
字体大小：24px；
线高：1；
字母间距：正常；
文本转换：无；
显示：内联；
空白：nowrap；
换字：正常；
方向：ltr；
-webkit字体功能设置：“liga”；
-webkit字体平滑：抗锯齿；
背景色：红色；
显示：内联；
}
.警惕{
位置：相对位置；
填充：0.75雷姆1.25雷姆；
边缘底部：1rem；
边框：1px实心透明；
边界半径：0.25雷姆；
}
.警报信息{
颜色：#0c5460；
背景色：#d1ecf1；
边框颜色：#bee5eb；
}

面部测试
使用flex，您可以完美地对齐项目

<div class="alert alert-info" role="alert">
  <i class="material-icons">face</i>

  <span class="text">
    Test
  </span>
</div>

将图标与文本对齐是什么意思？我在jsfiddle中也没有看到任何图标对不起，我更新了fiddle。
.alert {
    display: flex;
    ...
}

.alert .text {
    align-self: center;
}