Accessible name for buttons

How to define an accessible name for a button?

The following <button> elements have a valid name that can be announced by screen readers:

<button aria-label="Button name"></button>

<!-- or -->
<button aria-labelledby="name-for-button"></button>
<p id="name-for-button">Name for button</p>

<!-- or -->
<button title="Button name"></button>

<!-- or -->
<button>Button name</button>

Why is this important?

Screen readers announce the button with their accessible name. This way, people who use a screen reader hear the purpose of the button.

This rule fails often because icons are used as button. However, there is no way a screen reader can describe the icon deterministically.