kimoko

Выглядит так, словно это два независимых элемента того же блока. Значит ли это, что "menu__icon" должен быть способен существовать вне "menu__item"?

— Нет. В смысле, что он «не должен». Структуру вложенности задаёт блок. Блок menu «утвердил», что menu__icon лежит внутри menu__item. Если это поменяется, это уже может быть выражено через модификацию блока menu:

<nav class="menu menu_outside-icon">
  <i class="menu__icon"></i>
  <a class="menu__item" href="#!">
    Main
  </a>
</nav>

.menu_outside-icon .menu__icon {
  margin-right: 0;
}

или модификацию элемента:

<nav class="menu">
  <i class="menu__icon menu__icon_outside"></i>
  <a class="menu__item" href="#!">
    Main
  </a>
</nav>

.menu__icon_outside {
  margin-right: 0;
}

По поводу альтернативной структуры — на самом деле вам нужны миксы. Т. е. вы хотите на одном теге выразить и то, что это иконка (блок icon), и то, что у неё есть какая-то внешняя геометрия, обусловленная вложенностью в другой блок ( т. е. что она одновременно ещё и menu__icon):

<nav class="menu">
  <a class="link link_no-decoration menu__item" href="#!">
    <i class="icon icon_size_m menu__icon"></i>
    Main
  </a>
</nav>

.menu__item {
  padding: 1rem 2rem;
}

.menu__icon {
  margin-right: 0.5rem;
}

.link {
  color: blue;
}

.link_no-decoration,
.link_no-decoration:hover,
.link_no-decoration:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.icon {
  color: inherit;
  line-height: 1;
}

.icon_size_m {
  width: 1.5rem;
  height 1.5rem;
}