Styling for wrench icon - Angular material

Question

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>

Answer 1

You can also import the outline fonts, you can use "icon_names" to specific icons (in the example e.g. to import home and build append icon_names=build,home),

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?
 family=Material+Symbols+Outlined:opsz,wght,
 FILL,GRAD@24,400,0,0&icon_names=build,home" />

And use class="material-symbol-outlined"

<mat-icon class="material-symbols-outlined">build</mat-icon>
<mat-icon class="material-symbols-outlined">home</mat-icon>

To see all the outline-icons see this link

UPDATE: Really you can "replace" all the icons. If you define in your styles.css (or styles.scss)

.material-icons{
 font-family: 'Material Symbols Outlined';
 font-size: 24px;
}

The only is replace the font in your index.html

 <!--replace this-->
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
 rel="stylesheet">
 <!--with this another one-->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?
 family=Material+Symbols+Outlined:opsz,wght,
 FILL,GRAD@24,400,0,0">

NOTE: another way is use css text-stroke, but sadly it's not standard

 -webkit-text-stroke: 1px black;
 text-stroke: 1px black;

Answer 2

Angular material use a font family called 'Material Icons' to display the icons.

So in this method of showing icons using fonts, we can easily set the color of the font using color: blue; and use text-shadow to create the impression of an outline. Since we are using a font, there is no outline property, so we have to use this workaround.

.my-wrench mat-icon {
 color: white;
 text-shadow: -1px -1px 0 blue, 0 -1px 0 blue, 1px -1px 0 blue, 1px 0 0 blue,
 1px 1px 0 blue, 0 1px 0 blue, -1px 1px 0 blue, -1px 0 0 blue;
 -webkit-font-smoothing: antialiased;
}

Stackblitz Demo