title: How to align three icons to the right of the page headline
body: <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>