Align icon vertically to the center of the first line of text

I found the solution: http://jsfiddle.net/sqp1wdap/3/

1. Align both Eye and Text to flex-start
2. Make line-height for text same as Eye height

Here is the edited code:

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: flex-start; // ← edit (1)
  background: #eee;
}
.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  align-self: flex-start; // ← edit (1)
  background: #eaa;
  line-height: $fontSize; // ← edit (2)
}

And here is how it looks like:

Of course, if the icon height equals the line height it will be 'aligned' to the first line.

Normally, those two things will be different. You can't actually change the line height or the icon height without impacting the visual design.

So the solution for this would be to wrap the icon with a flex container which height equals the text line-height. This container will do the vertical centering of the icon. If the icon is larger than the container then it will just overflow from top and bottom.

So in your example (I'm just exaggerating the height for clarity, you could also try with very smalls values, like 8px and see how it works in both scenarios)

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  height: 100px; /* <-- set this */
}

.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  background: #eaa;
  line-height: 100px; /* <-- equal to this, no need to set this, just use right value above */
}

Notice that you don't actually need to change the text line-height, just set the eye container height to whatever that value should be.

Fiddle working for cases in which line-height is bigger than icon: http://jsfiddle.net/ofdwemva/

Fiddle working for cases in which line-height is smaller than icon: http://jsfiddle.net/ofdwemva/1/