How to make an SVG icon with text in one line in a menu block?

Question

css

Hello. In the navigation menu, the main page has its own styles.
Namely:
1. I set class="menu_icon_1" for the link in li,
2. I use the SVG icon (via CSS) to display it on the PC,
3. I write the icon itself in: class="home" 4. - I write Home in the tags, for display on Mobile (with adaptive menu) Accordingly, up to a certain resolution I write: dispay:none for the Icon, and above this resolution, on the contrary, I show and hide the Text itself. But if I make both the Icon and the Text visible, then they float and do not line up. How should the code look like so that the Icon and Text are on the same line, centered? HTML:<span class="home"></span>
<i>Главная</i>

<div class="menu_list">
  <ul>
    <li><a href="" class="menu_icon_1"><span class="home"></span><i>Главная</i></a></li>
    <li><a href="">Контакты</a></li>
  </ul>
</div>

CSS:

.menu_list{
  width:100%;
  position:relative;
  float:left;
  box-shadow:inset 0px 1px 0px 0px #eee,inset 0px -1px 0px 0px #eee;
  z-index:84;
}
.menu_list ul{
  right:50%;
  list-style:none;
  position:relative;
  float:right;
  clear:left;
  transition:.3s;
}
.menu_list>ul>li{
  left:50%;
  padding:0 10px;
  position:relative;
  float:left;
}
.menu_list>ul>li:first-child{
  padding:0 10px 0 0;
}
.menu_list>ul>li>a{
  color:#3d3d3d;
  padding:13px 5px;
  font-family:'Montserrat-bold',sans-serif;
  font-size:16px;
  line-height:1.5;
  text-transform:uppercase;
  display:block;
  position:relative;
  transition:.3s;
}

/*head-icon-home*/
.menu_list>ul>li>.menu_icon_1{
  padding:0 10px;
}
.menu_icon_1,
.menu_icon_2{
  width:100%;
  height:50px;
  display:block;
  position:relative;
}
.home{
  width:20px;
  height:20px;
  top:15px;
  display:inline-block;
  position:relative;
}
.home::before{
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBmaWxsPSIjM2QzZDNkIiBkPSJNMjgwLjM3IDE0OC4yNkw5NiAzMDAuMTFWNDY0YTE2IDE2IDAgMCAwIDE2IDE2bDExMi4wNi0uMjlhMTYgMTYgMCAwIDAgMTUuOTItMTZWMzY4YTE2IDE2IDAgMCAxIDE2LTE2aDY0YTE2IDE2IDAgMCAxIDE2IDE2djk1LjY0YTE2IDE2IDAgMCAwIDE2IDE2LjA1TDQ2NCA0ODBhMTYgMTYgMCAwIDAgMTYtMTZWMzAwTDI5NS42NyAxNDguMjZhMTIuMTkgMTIuMTkgMCAwIDAtMTUuMyAwek01NzEuNiAyNTEuNDdMNDg4IDE4Mi41NlY0NC4wNWExMiAxMiAwIDAgMC0xMi0xMmgtNTZhMTIgMTIgMCAwIDAtMTIgMTJ2NzIuNjFMMzE4LjQ3IDQzYTQ4IDQ4IDAgMCAwLTYxIDBMNC4zNCAyNTEuNDdhMTIgMTIgMCAwIDAtMS42IDE2LjlsMjUuNSAzMUExMiAxMiAwIDAgMCA0NS4xNSAzMDFsMjM1LjIyLTE5My43NGExMi4xOSAxMi4xOSAwIDAgMSAxNS4zIDBMNTMwLjkgMzAxYTEyIDEyIDAgMCAwIDE2LjktMS42bDI1LjUtMzFhMTIgMTIgMCAwIDAtMS43LTE2LjkzeiI+PC9wYXRoPjwvc3ZnPg==') no-repeat;
  width:20px;
  height:20px;
  left:0;
  content:'';
  position:absolute;
}
.menu_icon_1 i{
  font-style:normal;
}

Answer 1

Why complicate the dom tree so much?
Enough:
< div class="menu_list">
< ul>
< li >< a href="" class="home"> Home </li>
< li >< a href="">Contacts< /a >< / li >
< /ul >
< /div >
.menu_list .home{
...
background:url('data:image/svg+xml;ba....') left center no-repeat;
...
}

Answer 2

li {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}