How to make the icon in column header as button in angular material?

I have a icon in the column header in angular material.

But the problem is with the sorting arrow. The arrow where you can sort the column

Because if I now hover over the icon(filter_list) then the arrow will appear and also if you click on the icon the sorting will be activated.

But I want to make the icon clickable so that you can hide en show the checkboxes.

So this is the html:

    <ng-container matColumnDef="projects">
        <th
          mat-header-cell
          *matHeaderCellDef="let element"
          (mouseover)="show = true"
          (mouseout)="show = false"
          mat-sort-header
          i18n
        >
          <div class="mat-checkbox-project">
            <div class="row" *ngFor="let item of returnProjectCodes; let i = index">
              <mat-checkbox
                (click)="$event.stopPropagation()"
                (change)="filterProjects($event, i, item); selected = i"
                [checked]="selected === i"
                >
              </mat-checkbox>
            </div>
          </div>

          <a><mat-icon class="pointer myIcon">filter_list</mat-icon></a
          ><span class="mySpan">Project</span>
        </th>

        <td mat-cell *matCellDef="let row"></td>
      </ng-container>

and this is the css:

@import '../../../../scss/vars/breakpoints';

table {
  width: 100%;
}

.th-date {
  width: 8.5rem;
}

.table-participants {
  td {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.table-menu {
  margin-bottom: 1.618rem;

  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.list-heading {
  position: relative;
  margin-bottom: 1em;
  float: left;
  @media screen and (max-width: $bp-tablet) {
    display: none;
  }
}

.sent-bulk-v-cheq {
  position: absolute;
  left: 15px;
  top: 6em;
}

.extendedOpen {
  .table-filter {
    display: none;
  }
}

.mat-header-cell mat-checkbox {
  padding-top: 1px;
  padding-left: -10px;
  margin-bottom: 1px;
  display: table;
}

.mat-header-cell:hover mat-checkbox {
  margin-bottom: 1px;
  display: table;
}

 .mat-sort-header-button-project {
  position: fixed;
  //position:sticky;
}

.mat-checkbox-project {
  padding-top: 60px;
}

.myCustomHeading{position:relative;padding-top:4px;}
.myIcon{position:relative;}
.mySpan{position:absolute;padding-top:2px;}

.extended-search {
  display: none;
  width: 100%;
  max-width: 42em;
  background-color: #fff;
  &.expanded {
    display: block;
  }
}

.table-menu-button {
  float: right;
  &:last-of-type {
    margin-left: 1px;
  }
  &:not(:first-of-type) {
    margin-right: 1em;
  }
}

.table-filter {
  position: relative;
  float: right;
  width: 24em;
  background-color: #fff;
  padding: 0.5em 1.5em 0.25em 1.5em;
  border-radius: 0px;
  transition: border-radius 0.4s ease-out, padding 0.4s ease-out;

  &:focus-within {
    border-radius: 3rem;
  }
}

.search-filters {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  @media screen and (max-width: $bp-tablet) {
    justify-content: space-between;
  }
}

.filter-plus-icon {
  height: unset;
  width: unset;
  font-size: 2em;
  color: desaturate(#2196f3, 90);
  vertical-align: middle;
  z-index: 999;
}

.filter-plus-icon-search {
  $dim: 2em;
  position: relative;
  background-color: #fff;
  width: $dim;
  height: $dim;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 1em;
}

 .mat-sort-header-button {
  padding: -100px;
}

So what I have to change for that?

Thank you

So in the picture you see the icon. But if you click on it, then the sorting will be triggered. What not has to be.