Making navigation according to the BEM methodology?

Question

css

Let's say I have the following navigation structure:

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

.menu__item {
  padding: 1rem 2rem;
}

.menu__icon {
  margin-right: 0.5rem;
}

The "menu" block has two elements - "menu__item" and "menu__icon". It looks like they are two independent elements of the same block. Does this mean that "menu__icon" should be able to exist outside of "menu__item"? If so, then my style on menu__icon is completely off topic, because it is relevant only inside the menu_item... Therefore, the question arises - shouldn't the menu_item in this case be a block of the link -> link__icon type?

What about such a structure?

<nav class="menu">
  <ul class="menu-list">
    <li class="menu-list__item">
      <a class="link" href="#!">
        <i class="link__icon"></i>
        Main
      </a>
    </li>
  </ul>
</nav>

I like it more and it looks more logical, because. in menu-list__item you can shove anything... But then the styling of anything, in this case "link", does not look quite right...

// По-умолчанию
.link {
  text-decoration: underline;
}

// В контексте меню_айтема.
.menu-list__item .link {
  padding: 1rem 2rem;
  text-decoration: none;
}

Help calm down! Thanks to!