Angular 2 Flex Layout Align Icon Right

Question

I am having trouble aligning items using Angular Flex Layout.

The below snipper doesnt align the <md-icon> to the right of the header which is what I intend it to do.

Any advice on how to accomplish this?

<div class="flex-item" fxFlex fxFlexAlign="end end">

<md-card style="background-color:white;">
   <md-card-header style="background-color:white;">
      <md-card-title>Swap Card</md-card-title>
      <div class="flex-item" fxFlex fxFlexAlign="end end">
         <md-icon>add_a_photo</md-icon>
         Icon
      </div>
   </md-card-header>
   <md-card-content>
   </md-card-content>
</md-card>

Solution 1

You could add an empty span of flexible length in between:

<md-card>
  <md-card-header>
    <md-card-title>Swap Card</md-card-title>
    <span fxFlex></span>
    <md-icon>add_a_photo</md-icon>
  </md-card-header>
  <md-card-content>
  </md-card-content>
</md-card>

Solution 2

You were on right track, just needed to add the correct fxFlexAlign parameters. For your problem, you will need.

fxLayoutAlign="end start"

I have tested it in this plunker.

html:

<md-card style="background-color:white;">
    <md-card-header style="background-color:white;">
        <md-card-title>Swap Card</md-card-title>
          <div class="flex-item" 
               fxFlex fxLayoutAlign="end start">
            <md-icon>add_a_photo</md-icon>
              Icon
          </div>
        </md-card-header>
    <md-card-content>
    </md-card-content>
</md-card>

You can also learn about fxLayoutAlign using this documentation example.