Какое решение более верное (задание классов для иконок)?
Во втором случае получится следующий css .icon, .icon-first, .icon-second {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
}
.icon-first {
  background: url('icon-url-1');
}
.icon-second {
  background: url('icon-url-2');
}
Если у вас будет 200 классов, использующих extend, то первый селектор будет включать 200 уникальных имен классов и результирующий css получится более длинным.
На LESS вот такой вариант можно использовать Посмотреть в редакторе<i class="icon icon-first"></i>
<i class="icon icon-second"></i>.icon {  
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  
  &&-first {    
  background: url('icon-url.gif');
  }
  &&-second { 
  background: url('icon-url-2.gif');
  } 
}