MaterializeCss Form input (submit) button

Question

I am asking this question because I was faced we this very problem and found little (unconcise) to none information on the matter, here goes:

Having an html form, how to properly set up a submit button with materializecss?

If you try the conventional way, that is:

<form>
    <div class="file-field input-field">
        ...
        <input type ="submit" class ="btn waves-effect waves-light" value = "Submit"/>
    </div>
</form>

This is what you'll get:

As you can see the clickable part is only the middle of the button, and the rest won't trigger the form submition.

---

What i am looking for are answers (no javascript, just html) that offer alternatives. I'll post my own answer and hope for interesting alternatives.

Answer 1

This worked out great and allows for image inclusion:

<div class="row">
    <button class="btn waves-effect waves-light" type="submit" name="action">Submit
        <i class="material-icons right">send</i>
    </button>
</div>

Result: