How do I make the google material icon height the same as the text?-CodePudding

I want to google the material icon the height is the same as the text in the html css.

<p><i  style="font-size: 13.5px;">login</i> Login</p> 
<p><span  style="font-size: 20px;">home</span></p><div ><span  style="font-size: 20px;">home</span> Home</div>

I don't know how fix this

CodePudding user response：

#txt1{
 font-size:15px;
 line-height:24px;
}
.material-icons{
    display: inline-flex;
    vertical-align: top;
}

<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">

<i >login</i><span id="txt1">Login</span>