title: How can I filter a MatTable with accents/diacritics?
body: <p>I want to filter the names of a table regardless of whether the user has entered any accents or not.</p>
  
  <p>For example:</p>
  
  <p>If the user enters "hydrogen", the result should bring "Hydrôgen" as it is in the table.</p>
  
  <p>I use Angular 8.1.3 and Angular Material 8.0.1</p>
  
  <p>Here is my code:</p>
  
  <p>app.component.html: </p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;input matInput (keyup)="applyFilter($event.target.value)"  (focus)="setupFilter('name')" placeholder="Filter"&gt;
  &lt;/mat-form-field&gt;
  
  &lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z8"&gt;
  ...
  </code></pre>
  
  <p>my interface: </p>
  
  <pre class="lang-js prettyprint-override"><code>export interface PeriodicElement {
    name: string;
    position: number;
    weight: number;
    symbol: string;
  }
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>const ELEMENT_DATA: PeriodicElement[] = [
    {position: 1, name: 'Hydrôgen', weight: 1.0079, symbol: 'H'},
    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
    {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
    {position: 4, name: 'Béryllium', weight: 9.0122, symbol: 'Be'},
    {position: 5, name: 'Bóron', weight: 10.811, symbol: 'B'},
    {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
    {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
    {position: 8, name: 'ÔLxygen', weight: 15.9994, symbol: 'O'},
    {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
    {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  ];
  
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  
    applyFilter(filterValue: string) {
      this.dataSource.filter = filterValue.trim().toLowerCase();
    }
  
    setupFilter(column: string) {
      this.dataSource.filterPredicate = (d: any, filter: string) =&gt; {
        const textToSearch = d[column] &amp;&amp; d[column].toLowerCase() || '';
        return textToSearch.indexOf(filter) !== -1;
      };
    }
  
    public removeAccents(str: string): string {
      return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
    }
  </code></pre>
  
  <p>I expect when user input "bo" show in table 2 lines those containing "Carbon" and "Bóron".</p>