Hide some elements when text starts to overflow - html

Question

I'm making a button that has text content and an icon, I'd like to make it so that when it starts to put content onto multiple lines it hides the icon.
Here's a code example with three cases: one where the content fits just fine and the icon looks good, one where the content can't fit and the icon is pretty lame, and a last one that's more like how I would like it to work with the icon being hidden.
<style>
.some-flex-box {
display: flex;
gap: 10px;
justify-content: space-between;
width: 300px;
}
.fun-icon {
height: 16px;
width: 16px;
}
.reactive-button img {
height: 16px;
}
</style>
<div class="some-flex-box">
<div>First box fits content</div>
<button class="reactive-button">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png" />
awesome
</button>
</div>
<br>
<div class="some-flex-box">
<div>Second box has lots of content and puts everything on multiple lines</div>
<button class="reactive-button">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e0/WPVG_icon_2016.svg/1024px-WPVG_icon_2016.svg.png" />
uh oh
</button>
</div>
<br>
<div class="some-flex-box">
<div>If the second example hid the icon (like this) that would be super sweet</div>
<button class="reactive-button">
this works
</button>
</div>