diff --git a/src/app/components/metadata/metadata.component.html b/src/app/components/metadata/metadata.component.html
index 20b8499..60613e9 100644
--- a/src/app/components/metadata/metadata.component.html
+++ b/src/app/components/metadata/metadata.component.html
@@ -4,7 +4,7 @@
       <ng-template mat-tab-label>
         <div class="metadata-tab">
           <div class="tab-text">Categories</div>
-          <mat-icon class="example-tab-icon">ballot</mat-icon>
+          <mat-icon class="material-icons-outlined">dashboard</mat-icon>
         </div>
       </ng-template>
 
@@ -15,7 +15,7 @@
       <ng-template mat-tab-label>
         <div class="metadata-tab">
           <div class="tab-text">Merchants</div>
-          <mat-icon class="example-tab-icon">shopping_cart</mat-icon>
+          <mat-icon class="material-icons-outlined">shopping_cart</mat-icon>
         </div>
       </ng-template>
 
@@ -26,7 +26,7 @@
       <ng-template mat-tab-label>
         <div class="metadata-tab">
           <div class="tab-text">Tags</div>
-          <mat-icon class="example-tab-icon">label</mat-icon>
+          <mat-icon class="material-icons-outlined">sell</mat-icon>
         </div>
       </ng-template>
 
diff --git a/src/index.html b/src/index.html
index 66e56cd..9dbd9e8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,7 +13,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
