How do I implement the 'add' FAB on the bottom right like I see in many Google web apps?

I just found out the answer:

<md-button class="md-fab md-fab-bottom-right" aria-label="Add a category">
  <md-icon>add</md-icon>
</md-button>

I had to add a classname of md-fab-bottom-right.

The main CSS rule is "right"; in order to add to Luis's answer, add this rule to the CSS:

.md-fab-bottom-right{
    position: fixed !important;
    right: 15px; /* Add this and change value to set the margin you want */
}

To improve your question: if you have problems with the button's position add this to your css:

.md-fab-bottom-right{
    position: fixed !important;
}

This way, the button will be fixed even if the user do scroll

Related