Размещение иконок на странице сайта. Делать проще, поддерживать легче

Без разницы. Я беру пример с вашей статьи, в ней логический элемент это button, то что внутри контент(текст) и иконка (декор).
Меньше html не значит лучше, структуру должна быть разбита на логические кусочки с которыми можно работать и легко читать и поддерживать.

Вот к примеру, из описанных вами недостатков.пример:

<button class="button_menu">
  <span class="button_menu__text button_icon button_icon__menu button_icon__menu_active">menu</span>
</button>

Как то совсем не по методологии, у вас тег span является элементом к .button_menu и .button, если же иконка является декорирующим элементом к тексту, то соответственно вместо классов (button_icon, button_icon__menu, button_icon__menu_active), добавляем к элементу button_menu__text модификатор к примеру button-menu__text--icon-menu

Проще же так:

<button class="button-menu button-menu--active">
    <i class="button-menu__icon button-menu__icon--menu"></i>
    <span class="button-menu__text">menu</span>
</button>

Размещение иконок на странице сайта. Делать проще, поддерживать легче

2 элемента, как по мне хороший вариант, только вторым элементом, нужно не оборачивать текст, а делать его для иконки.
Почему иконку делать отдельным элементом, чтобы можно было манипулировать ей с javascript и в html структура верстки чище.

<button class="button">
  <i class="button__icon"></i>menu
</button>