title: Adding "delete" button in mat-select
body: <p>Hello Stackoverflow community,</p>
  
  <p>I am trying to add a "Delete" button next to each <em>mat-option</em> of a given <em>mat-select</em> when hovering over the option itself. The hover portion works just fine. However, given the way I implemented this button, the data displayed after selecting an option is altered :</p>
  
  <p><strong>From this :</strong></p>
  
  <p><a href="https://i.stack.imgur.com/7jL2K.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7jL2K.png" alt="enter image description here"></a></p>
  
  <p><strong>To this :</strong></p>
  
  <p><a href="https://i.stack.imgur.com/0qoqi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0qoqi.png" alt="enter image description here"></a></p>
  
  <p>Here is a snippet of the code used :</p>
  
  <p><strong>HTML template :</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field appearance="outline"&gt;
    &lt;mat-select&gt;
      &lt;mat-option *ngFor="let year of data" [value]="year"&gt;
  
        &lt;div style="display:flex; justify-content: space-between"&gt;
          &lt;span&gt;{{year}}&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span class="deleteYear" (click)="openDeleteDialog(year)"&gt;
            &lt;i class="material-icons-outlined"&gt;clear&lt;/i&gt;
          &lt;/span&gt;
        &lt;/div&gt;
  
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I believe there is no relevant code in the typescript component to share. However, I'm more than willing to provide the source code if needed.</p>
  
  <p><strong>2 Questions :</strong></p>
  
  <ol>
  <li>How can I get rid of the "clear" (name of the "X" icon) text appended to the desired "year" string?</li>
  <li>Right now, when I click the "X" button, the functions fires just fine. However, it also selects that option in the mat-select as by clicking on the "X" I also click on the row. Is there any way I can have the function fire but make the form not to believe that I selected the row?</li>
  </ol>
  
  <p>Thanks to all for your support,</p>