Vertically center both Icon and span in a div

Question

The structure is like this:

css
.toolBarHolder {
  height: 42px;
  line-height: 42px;
}

<div class='toolBarHolder'>
  <icon class='toolBarIcon'>near_me</icon>
  <span class='toolBarText'>lake area</span>
</div>

with this the span can be vertically centered, but the icon failed.

Answer 1

Just give the properties display:flex; align-items:center; justify-content:center; to .toolBarHolder. There's no need to use line-height;

It would be like this:

css
.toolBarHolder {
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
}

P.D.: Since we're using justify-content: center, you will also have to set a width (div content is centered horizontally aswell).