The problem arises from the conflict between the button's flexbox and the list's simple display block structure.
To resolve this issue, you can apply a specific class to the list item that you want the button to align with using the following code snippet: https://codepen.io/nickimola/pen/LjWPRy?editors=1000
li.align-button-inline{
display:flex;
align-items: center
}
Then, modify the HTML as follows:
<ul>
<li class="adding-inline-button">Element 1
<md-fab-speed-dial md-open="false" md-direction="right" ng-class="md-fling">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn md-mini">
<md-icon md-svg-src="img/icons/menu.svg"></md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="twitter" class="md-fab md-raised">
<md-icon md-svg-src="img/icons/twitter.svg"></md-icon>
</md-button>
<md-button aria-label="facebook" class="md-fab md-raised">
<md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
</md-button>
<md-button aria-label="Google hangout" class="md-fab md-raised">
<md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</li>
It's worth noting that by implementing this solution, the bullet point for the list item disappears. If retaining the bullet points is important to you, they can be reintroduced through font adjustments or :before pseudo-elements.
I hope this information proves useful in addressing your concerns.