How to align an image with a header element with flexbox that looks the same in all browsers?

I'm having issues with aligning an icon image with a header using flexbox in a way that is consistent between browsers.

The differences between browsers can be seen here:

As you can see, the image is aligned differently on all browsers but especially so on Firefox. The Chrome/Safari difference I can live with, but Firefox has been an issue for a lot of designs I've worked on. The difference might seem small, but it is very noticeable, especially on bigger font sizes.

I could probably work around this with some ::before, position: absolute, transform: translate(), etc hacking, but I guess I'm wondering if there is any simple and clean way to fix this disparity while still using flexbox?

The code used to generate (Jsfiddle) the above image:

HTML

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/69/How_to_use_icon.svg"/>
  <h1>
  AAA
  </h1>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.container h1 {
  font-size: 72px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
}