How to align three icons to the right of the page headline
<p>I have the current situation:</p>

<p><a href="https://i.stack.imgur.com/TIwYB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TIwYB.jpg" alt="enter image description here"></a></p>

<p>Relevant code:</p>

<pre><code>&lt;md-toolbar color="primary" class="main-toolbar"&gt;
  &lt;div fx-layout="row" fx-flex fx-layout-align="space-between"&gt;
    &lt;span  class="page-headline"&gt;
      &lt;img class="logo" src="./logo.png"/&gt;club
    &lt;/span&gt;
    &lt;button md-icon-button class="main_menu_button1" (click)="dinnerClicked()"&gt;
      &lt;md-icon&gt;local_pizza&lt;/md-icon&gt;
    &lt;/button&gt;
    &lt;button md-icon-button class="main_menu_button2" (click)="notificationsClicked()"&gt;
      &lt;md-icon&gt;notifications&lt;/md-icon&gt;
    &lt;/button&gt;
    &lt;button md-icon-button class="main_menu_button3" (click)="eventsClicked()"&gt;
      &lt;md-icon&gt;event_note&lt;/md-icon&gt;
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/md-toolbar&gt;
</code></pre>

<p>I just want the 3 icons to be adjacent closely to each other and align to the right. If I change <code>fx-layout-align</code> to <code>fx-layout-align-xs</code>, I get almost what I want:</p>

<p><a href="https://i.stack.imgur.com/yqyTN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yqyTN.jpg" alt="enter image description here"></a></p>

<p>But to the left instead of to the right...</p>

<p>I have tried many CSS configurations but none worked for me, is there any easy way to acheive this? Many thanks.</p>