Switch to mat-icon class to solve missing spacing in button

Signed-off-by: Jannik Hollenbach <jannik.hollenbach@owasp.org>

Author: J12934

frontend/src/app/web3-sandbox/web3-sandbox.component.html

@@ -43,9 +43,7 @@ <h2 translate>TITLE_WEB3_SANDBOX</h2>
         mat-raised-button
         (click)="compileAndFetchContracts(code)"
       >
-        <i class="material-icons">
-          build
-        </i>
+        <mat-icon>build</mat-icon>
         {{ "BTN_COMPILE_CONTRACT" | translate}}
       </button>
       <div *ngIf="compilerErrors.length > 0" class="error-container mat-elevation-z6">
@@ -86,9 +84,7 @@ <h3 class="contracts-title">{{ "TITLE_CONTRACT_DEPLOYMENT" | translate}}</h3>
           type="button"
           (click)="deploySelectedContract()"
         >
-          <i class="material-icons">
-            link
-          </i>
+          <mat-icon>link</mat-icon>
           {{ "BTN_DEPLOY_SELECTED_CONTRACT" | translate}}
         </button>
       </div>
@@ -106,9 +102,7 @@ <h3 translate>TITLE_INTERACT_WITH_CONTRACT</h3>
                   type="button"
                   (click)="invokeFunction(func)"
                 >
-                  <i class="material-icons">
-                    call_to_action
-                  </i>
+                  <mat-icon>call_to_action</mat-icon>
                   {{ "BTN_INVOKE" | translate}} {{ func.name }}
                 </button>
                 <mat-form-field appearance="outline" color="accent">
@@ -133,9 +127,7 @@ <h3 translate>TITLE_INTERACT_WITH_CONTRACT</h3>
                   type="button"
                   (click)="invokeFunction(func)"
                 >
-                  <i class="material-icons">
-                    call_to_action
-                  </i>
+                  <mat-icon>call_to_action</mat-icon>
                   {{ "BTN_INVOKE" | translate}} {{ func.name }}
                 </button>
                 <div class="invoke-output" *ngIf="func.outputValue !== ''">

frontend/src/app/web3-sandbox/web3-sandbox.component.ts

@@ -19,6 +19,7 @@ import { NgIf, NgFor } from '@angular/common'
 import { MatButtonModule } from '@angular/material/button'
 import { FormsModule } from '@angular/forms'
 import { CodemirrorModule } from '@ctrl/ngx-codemirror'
+import { MatIconModule } from '@angular/material/icon'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const client = createClient({
@@ -42,7 +43,7 @@ const compilerReleases = {
   templateUrl: './web3-sandbox.component.html',
   styleUrls: ['./web3-sandbox.component.scss'],
   standalone: true,
-  imports: [CodemirrorModule, FormsModule, MatButtonModule, NgIf, TranslateModule, MatFormFieldModule, MatLabel, MatInputModule, NgFor]
+  imports: [CodemirrorModule, FormsModule, MatButtonModule, MatIconModule, NgIf, TranslateModule, MatFormFieldModule, MatLabel, MatInputModule, NgFor]
 })
 export class Web3SandboxComponent {
   constructor (