title: How to add image into Angular Material table column?
body: <p>I am using an Angular Material table. I wanted to have an icon before the flag text in that column, or how do I add a column with icons? for some reason I can't see how this can be done. My code so far is: </p>
  
  <p>component.ts </p>
  
  <pre><code>export interface PeriodicElement {
    date: string;
    action: string;
    mileage: string;
    author: string;
    flag: string;
  }
  
    const ELEMENT_DATA: PeriodicElement[] = [
    {date: 'xxxxx', action: 'xxxxx', mileage: "xxxxx", author:"xxxxx", flag:"Late"},
    {date: 'xxxxx', action: 'xxxxx', mileage: "xxxxx", author:"xxxxx", flag:"Late"},
    {date: 'xxxxx', action: 'xxxxx', mileage: "xxxxx", author:"xxxxx", flag:"Late"},
  ];
  
    displayedColumns: string[] = ['date', 'action', 'mileage', 'author', 'flag'];
    dataSource = new MatTableDataSource(ELEMENT_DATA);
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ng-container matColumnDef="flag"&gt;
          &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Flag&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element" class="status"&gt;{{element.flag}} &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>