title: Button icons are making button names undefined
body: <p>When I put an icon inside a button, the name and the value property of the button becomes <code>undefined</code>.</p>
  <pre><code>listSpendings() {
      var mapped = this.props.money.transes.slice(0).reverse().map(trans =&gt; {
        return (
          &lt;div key={trans._id} className=&quot;smoothbackground z-depth-3&quot;&gt;
          &lt;li key={trans._id} className=&quot;collection-item&quot; style={{
          textDecoration: trans.crossedOut ? &quot;line-through&quot; : &quot;none&quot;
          }}&gt; {trans.who} spent ${trans.amount} on {trans.info}
          &lt;button onClick={this.handleClickChange} type=&quot;submit&quot; className=&quot;btn-floating btn-small waves-effect waves-light align-right-button&quot; name=&quot;CrossOut&quot; value={trans._id}&gt;
            X
          &lt;/button&gt;
          &lt;/li&gt;
          &lt;/div&gt;
        )
      })
      return mapped;
    }
  </code></pre>
  <p>This function works without any issues. This is the handleClickChange,</p>
  <pre><code>handleClickChange = event =&gt; {this.setState({ name: event.target.name, transId: event.target.value}); console.log(event.target.name);}
  </code></pre>
  <p><code>console.log(event.target.name);</code> logs <code>CrossOut</code> like it should. Because that's the button's name.</p>
  <p>However, when I put <code>&lt;i class=&quot;material-icons&quot;&gt;delete&lt;/i&gt;</code> instead of the <code>X</code> you see in the code, <code>console.log(event.target.name);</code> logs <code>undefined</code>.</p>
  <p><code>&lt;i class=&quot;material-icons&quot;&gt;delete&lt;/i&gt;</code> is a delete icon and it properly gets displayed on the screen, inside the button. In any case, I've also tried another icon. This is the trash icon from bootstrap.</p>
  <pre><code>&lt;svg width=&quot;1em&quot; height=&quot;1em&quot; viewBox=&quot;0 0 16 16&quot; class=&quot;bi bi-trash&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;path d=&quot;M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z&quot;/&gt;
    &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z&quot;/&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>This one also gets displayed but the <code>console.log(event.target.name);</code> also logs <code>undefined</code>.</p>
  <p>Any ideas?</p>