SMACSS\BEM - how to correctly handle icon style?

Question

I have two nested modules:

<div class="header">
.....
<i class="topIcon"></i>
......
</div>

I have two separate files (I would like to keep it separate because they are reusable parts and can be used separately throughout the application) acting as modules in SMACSS terminology:
Header:

.header {
   /* header styles */
}

Icon:

.topIcon {
 /* icon styles */
} 

Now I want to apply some styles to my topIcon when header has :hover state.
I can put .header:hover .topIcon inside my icon module file and apply style, however from my POV it breaks SMACSS rules.

Do you have any better suggestions?

Answer 1

I use to do it by using Sass' & selector:

.topIcon {
  /* icon styles */

  .header & {
    /* modified styles when it's in header */
  }
  .header:hover & {
    /* modified styles when it's in header thats hovered */
  }
} 

The result would be

.topIcon {
  /* icon styles */
}
.header .topIcon {
  /* modified styles when it's in header */
}
.header:hover .topIcon {
  /* modified styles when it's in header thats hovered */
}

That way, I keep the icon-related styles in the icon file, but avoid "foreign" classes at a root level.

A weak point of that way might be, that you might also have another rule for .header:hover in the header file, which might be confusing for others, where to place what.