Vertical icon bar with angular material - css

Question

I'm trying to make a vertical icon toolbar. I want it to be on the right top side. It shall only occupy the width of the icon (24px and some padding).
I tried this
<div layout="column" layout-align="top end">
<md-button class="md-icon-button" aria-label="close">
<md-icon md-font-icon="zmdi zmdi-close"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-font-icon="fa fa-print"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="close">
<md-icon md-font-icon="fa fa-print"></md-icon>
</md-button>
</div>
Any smart way to achive this with angular material directives? Or must I do it manually with css?

Answer 1

Here you go - CodePen
I did the original for this example (which was on the left hand side) for another question which I can't find for the moment. I've answered again to help yourself and others.
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column">
<md-content flex layout="row">
<div flex>
Your content
</div>
<div layout="column">
<md-whiteframe id="vericalToolBar" class="md-whiteframe-8dp" layout="column" layout-align="start center" flex>
<md-button class="md-icon-button" aria-label="More">
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
</md-button>
<p id="toolBarTitle" class="md-title">My vertical toolbar</p>
<span flex></span>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/cake.svg"></md-icon>
</md-button>
</md-whiteframe>
</div>
</md-content>
</div>
CSS
#vericalToolBar {
background-color: rgb(1,74,182);
width: 40px;
}
#vericalToolBar md-icon {
color: rgba(255,255,255,0.87);
}
#toolBarTitle {
writing-mode: tb-rl;
color: rgba(255,255,255,0.87);
}