title: angular 8 material dialog close button with X top right
body: <p>I am trying to get my material dialog to have an X button at the top right, but I am having problems with the positioning.</p>
  
  <p>component.ts</p>
  
  <pre><code>this.d.open(loginComponent, {
    width: '300px',
    height: '',
    panelClass: 'dialogC',
  });
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code>&lt;mat-dialog-content&gt;
      &lt;button mat-button class="close-icon" [mat-dialog-close]="true"&gt;
          &lt;mat-icon&gt;close&lt;/mat-icon&gt;
      &lt;/button&gt;
      &lt;h2 mat-dialog-title&gt;Login&lt;/h2&gt;
  </code></pre>
  
  <p>style.scss</p>
  
  <pre><code>.dialogC {
    position: relative !important;
  }
  
  .close-icon {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
  }
  </code></pre>
  
  <p>The X is just aligned to the left instead of top right.  Suggestions?</p>
  
  <p><strong>Update, this is the problem I get after adding flex:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Cyexw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Cyexw.png" alt="enter image description here"></a></p>