title: Value attribute of button not passed when icon is clicked directly
body: <p>I have an html button created using bootstrap that is essentially an Icon used to toggle the state of an item on a website.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;button class='btn' value='${noteid}' onclick='toggleAck(event)'&gt;&lt;i class=&quot;fas fa-eye&quot;&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  <p>When it is clicked a request is fired:</p>
  <pre class="lang-js prettyprint-override"><code>function toggleAck(event) {
              const noteid = event.target.value
              console.log(event.target)
              $.post({
                      url: `/note/${noteid}/toggleacknowledge`,
                      dataType: &quot;json&quot;
                  },
                  (response) =&gt; {
                      if (!response.success) {
                          alert(&quot;Failed to mark as read&quot;)
                      }
                      refreshNotes()
                  }
              )
          }
  </code></pre>
  <p>regardless of whether I click the button or the icon, the toggleAck event triggers. However, if I click the icon directly instead of the button the <code>value</code> attribute is not passed and the function fails.</p>
  <p>How can I fix this HTML so that the value is passed regardless of where the user clicks?</p>