title: Angular 2 Flex Layout Align Icon Right
body: <p>I am having trouble aligning items using Angular Flex Layout. </p>
  
  <p>The below snipper doesnt align the <code>&lt;md-icon&gt;</code> to the right of the header which is what I intend it to do. </p>
  
  <p>Any advice on how to accomplish this?</p>
  
  <p><code>&lt;div class="flex-item" fxFlex fxFlexAlign="end end"&gt;</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;md-card style="background-color:white;"&gt;
     &lt;md-card-header style="background-color:white;"&gt;
        &lt;md-card-title&gt;Swap Card&lt;/md-card-title&gt;
        &lt;div class="flex-item" fxFlex fxFlexAlign="end end"&gt;
           &lt;md-icon&gt;add_a_photo&lt;/md-icon&gt;
           Icon
        &lt;/div&gt;
     &lt;/md-card-header&gt;
     &lt;md-card-content&gt;
     &lt;/md-card-content&gt;
  &lt;/md-card&gt;
  </code></pre>