How to Make a materialize CSS button's width same as col s12?

If your column which you have your input field in is limited to a certain width (in the way how the Bootstrap columns work), you can put the .btn inside a column as well.

After that, you can use the following CSS to make the width equal to the input field:

.col.s12 > .btn {
   width: 100%;
}

Of course if the button as an element does not bend to this CSS-rule, you can use <a class="btn"> instead.

Surround the button with a div with col s12 classes and add btn-block to the button:

<div class="row">
    <div class="col s12">
        <button class="btn btn-block waves-effect waves-light" type="submit" name="action">Search
            <i class="material-icons">search</i>
        </button>
    </div>
</div>

And add the following CSS:

.btn-block {
    width: 100%;
}