Icons in React not centered vertically

Question

I have this simple template:

<div className="wrapper">
      <div className="block one">
        <GoSearch />
        15
      </div>
      <div className="block two">test</div>
    </div>

with this css:

.wrapper {
  display: flex;
  width: 100%;
  margin-top: 40px;
  justify-content: center;
  align-items: center;
}

.block {
  flex: 1;
  background-color: red;
}

looking like this:

Why is the icon not centered vertically? I also tried with vertical-align: middle directly to the svg

Answer 1

Add flex-direction: column; as the default value for this property is row.

Answer 2

.one also needs this style:

display: inline-flex;
align-items: center;