Styling for wrench icon - Angular material

I want to style the wrench icon with a blue outline and white/transparent color. The icon is black right now so I can see it but I want the icon to look like this https://www.flaticon.com/free-icon/spanner_759749.

I am using a css element called my-wrench and can't seem to get it to look like the icon in the link above.

When I inspect/debug the style for the wrench the properties except for color are grayed out.

css

.my-wrench{
transform: rotate(90deg); /* Rotates the icon 90 degrees clockwise */
color: black
outline-color: blue
outline-style: solid;
}


I tried adding mat-icon element but that just makes the wrench blue instead of black

.my-wrench mat-icon {
color: blue;
}


html for icon

<ng-container matColumnDef="{{toggleColDef}}">
<th mat-header-cell *matHeaderCellDef>
<button
mat-button
[matMenuTriggerFor]="menu"
class="table-config-menu my-wrench"
>
<mat-icon aria-hidden="false" aria-label="Example home icon"
>build</mat-icon
>
<mat-menu #menu="matMenu">
<span class="table-config-menu-label">Edit Columns</span>
<div
class="table-config-menu-options"
style="display: flex; flex-direction: column; padding: 8px"
>
<mat-checkbox
*ngFor="let cd of columnDefinitions; let i = index"
[checked]="isColumnVisible(cd.def)"
(change)="toggleColumn(cd.def, $event.checked)"
>
{{cd.label}}
</mat-checkbox>
</div>
</mat-menu>
</button>
</th>
<td mat-cell *matCellDef="let element"></td>
</ng-container>

Continue reading...