html – Fix icon in lower right corner using Materialize


First time using materialize .

I would like to know how to fix an icon in the lower right corner.

<a class="btn-floating btn-large cyan pulse right"><i class="material-icons">edit</i></a>

Natively if any.


I haven't found a native class to do this in the documentation, but you can make an adjustment using a top of 100% minus the height of the btn itself.

See how it looks in the example below:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
.btn-bottom {
    top: calc(100% - 56px);
<link href="" />
<link href="" />
<script src=""></script>
<script src=""></script>

<a class="btn-floating btn-large cyan pulse right btn-bottom"><i class="material-icons">edit</i></a>
Scroll to Top