Выравнивание текста и иконки

/* Врап для иконки и текста */ 
.item  { 
  position: relative; 
  padding-left: 1.5rem; 
} 
 
/* Иконка */ 
i { 
  position: absolute; 
  left: 0; 
  top: 50%; 
  margin-top: -.5rem; 
} 
 
 
/* Доп. стилизация для наглядности примера */ 
 
/* Врап для иконки и текста */ 
.item { 
  max-width: 150px; 
  width: 100%; 
   
  margin-bottom: 1rem; 
} 
/* Иконка */ 
i { 
  display: block; 
  width: 1rem; 
  height: 1rem; 
  background: #ccc; 
} 
/* Текст */ 
span { 
  display: inline-block; 
  vertical-align: middle; 
}

  <div class="item"> 
    <i></i> 
    <span>Lorem ipsum dolor.</span> 
  </div> 
   
  <div class="item"> 
    <i></i> 
    <span>Lorem ipsum dolor sit amet.</span> 
  </div>

.item  { 
    display: flex; 
    flex-flow: row nowrap; 
    align-items: center; 
} 
 
 
/* Доп. стилизация для наглядности примера */ 
.item { 
  max-width: 150px; 
  width: 100%; 
   
  margin-bottom: 1rem; 
} 
 
i { 
  display: block; 
  width: 1rem; 
  height: 1rem; 
  background: #ccc; 
  margin-right: .5rem; 
} 
 
span { 
  width: 90%; 
}

<div class="item"> 
    <i></i> 
    <span>Lorem ipsum dolor.</span> 
  </div> 
   
  <div class="item"> 
    <i></i> 
    <span>Lorem ipsum dolor sit amet.</span> 
  </div>

.item  { 
    display: table; 
} 
 
.icon { 
  display: table-cell; 
  vertical-align: middle; 
} 
 
/* Доп. стилизация для наглядности примера */ 
.item { 
  max-width: 150px; 
  width: 100%; 
   
  margin-bottom: 1rem; 
} 
 
.icon { 
  width: 1rem; 
   
  padding-right: .5rem; 
} 
 
.icon i { 
  display: block; 
  width: 1rem; 
  height: 1rem; 
  background: #ccc; 
}

<div class="item"> 
    <span class="icon"><i></i></span> 
    <span>Lorem ipsum dolor.</span> 
  </div> 
   
  <div class="item"> 
    <span class="icon"><i></i></span> 
    <span>Lorem ipsum dolor sit amet.</span> 
  </div>

.parent { 
  width: 130px; 
} 
 
button { 
  width: 100%; 
  position: relative; 
  padding-left: 25px; 
  box-sizing: border-box; 
  word-wrap: break-word; 
} 
 
.icon { 
  width: 20px; 
  height: 20px; 
  position: absolute; 
  left: 0; 
  top: 50%; 
  transform: translate(0, -50%); 
}

<div class="parent"> 
  <button> 
    <span class="icon">&#x2709;</span> 
    Send e-mail to Mr.Smith 
  </button> 
</div>