title: Angular Material Design card: how to fix alignment?
body: <p>I am creating a small component that contains a card which shows a question and lets the user select a value from a slider.</p>
  <p>The HTML is:</p>
  <pre><code>&lt;mat-card class=&quot;survey-card&quot;&gt;
    &lt;mat-card-header&gt;
      &lt;mat-icon&gt;question_answer&lt;/mat-icon&gt;
      &lt;mat-card-title&gt;
        {{question}}
      &lt;/mat-card-title&gt;
      &lt;mat-card-subtitle&gt;
        Choose your best answer.
      &lt;/mat-card-subtitle&gt;
    &lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;mat-slider class=&quot;survey-slider&quot; thumbLabel [min]=&quot;minValue&quot; [max]=&quot;maxValue&quot; (change)=&quot;sliderChanged($event)&quot;&gt;
      &lt;/mat-slider&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  <p>What I want is for the icon to be in the upper-right corner. However, its location now is dependent on the length of text in the question.</p>
  <p>Here is an image where I show 3 of these components, with different length questions:</p>
  <p><a href="https://i.stack.imgur.com/fKB1g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fKB1g.png" alt="enter image description here" /></a></p>
  <p>My SCSS is</p>
  <pre><code>* {
    border: 1px solid black;
  }
  .survey-card {
    border: 1px solid steelblue;
    border-radius: 10px;
    max-width: 20vw;
    margin: 1vw;
  }
  
  // Force icon to be in the upper-right corner.  Not a great solution, but seems to work.
  .mat-icon {
    margin-left: 40px;
  }
  
  .mat-slider-horizontal {
    min-width: 100%;
  }
  </code></pre>
  <p>Note that the code to &quot;force the icon&quot; into the upper right does not really work.
  The <code>&lt;mat-icon&gt;</code> and <code>&lt;mat-card-title&gt;</code> are in a flexbox, so I've tried to put <code>flex-grow: 1</code> on the children of the mat-card-header using <code>mat-card-header &gt; * { flex-grow: 1 }</code> but that doesn't seem to work -- the icon fills the area horizontally but is aligned to the left part of its area.</p>
  <p>Any help would be appreciated!  I'm sure it is just one tiny thing I'm missing.</p>