5 files changed, 29 insertions, 29 deletions

diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.html b/client/src/app/shared/shared-instance/feature-boolean.component.html
index ccb8a30cc..6de5d2075 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.html
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.html
@@ -1,3 +1,2 @@
-<span *ngIf="value === true" class="glyphicon glyphicon-ok" i18n-aria-label aria-label="yes"></span>
-<span *ngIf="value === false" class="glyphicon glyphicon-remove" i18n-aria-label aria-label="no"></span>
-
+<my-global-icon *ngIf="value === true" iconName="tick" i18n-aria-label aria-label="yes"></my-global-icon>
+<my-global-icon *ngIf="value === false" iconName="cross" i18n-aria-label aria-label="no"></my-global-icon>
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.scss b/client/src/app/shared/shared-instance/feature-boolean.component.scss
index 8683ecc55..29b8c3e02 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.scss
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.scss
@@ -1,10 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.glyphicon-ok {
+my-global-icon[iconName=tick] {
   color: $green;
 }
 
-.glyphicon-remove {
+my-global-icon[iconName=cross] {
   color: $red;
 }
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.html b/client/src/app/shared/shared-instance/instance-statistics.component.html
index 2ca61fd94..960520680 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.html
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.html
@@ -10,7 +10,7 @@
           <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
           <p class="stat-label" i18n>users</p>
         </div>
-        <i class="glyphicon glyphicon-user icon-bottom"></i>
+        <my-global-icon iconName="user"></my-global-icon>
       </div>
     </div>
 
@@ -20,7 +20,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
           <p class="stat-label" i18n>videos</p>
         </div>
-        <i class="glyphicon glyphicon-facetime-video"></i>
+        <my-global-icon iconName="film"></my-global-icon>
       </div>
     </div>
 
@@ -30,7 +30,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
           <p class="stat-label" i18n>views</p>
         </div>
-        <i class="glyphicon glyphicon-eye-open"></i>
+        <my-global-icon iconName="sensitive"></my-global-icon>
       </div>
     </div>
 
@@ -40,7 +40,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
           <p class="stat-label" i18n>comments</p>
         </div>
-        <i class="glyphicon glyphicon-comment"></i>
+        <my-global-icon iconName="message-circle"></my-global-icon>
       </div>
     </div>
 
@@ -50,7 +50,7 @@
           <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
           <p class="stat-label" i18n>hosted video</p>
         </div>
-        <i class="glyphicon glyphicon-hdd"></i>
+        <my-global-icon iconName="home"></my-global-icon>
       </div>
     </div>
   </div>
@@ -64,7 +64,7 @@
           <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
           <p class="stat-label" i18n>videos</p>
         </div>
-        <i class="glyphicon glyphicon-facetime-video"></i>
+        <my-global-icon iconName="film"></my-global-icon>
       </div>
     </div>
 
@@ -74,7 +74,7 @@
           <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
           <p class="stat-label" i18n>comments</p>
         </div>
-        <i class="glyphicon glyphicon-comment"></i>
+        <my-global-icon iconName="message-circle"></my-global-icon>
       </div>
     </div>
 
@@ -84,7 +84,7 @@
           <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
           <p class="stat-label" i18n>followers</p>
         </div>
-        <i class="glyphicon glyphicon-retweet"></i>
+        <my-global-icon iconName="share"></my-global-icon>
       </div>
     </div>
 
@@ -94,7 +94,7 @@
           <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
           <p class="stat-label" i18n>following</p>
         </div>
-        <i class="glyphicon glyphicon-retweet"></i>
+        <my-global-icon iconName="globe"></my-global-icon>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.scss b/client/src/app/shared/shared-instance/instance-statistics.component.scss
index 5286ab03a..e1d489d28 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.scss
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.scss
@@ -1,3 +1,5 @@
+@use '_variables' as *;
+@use '_mixins' as *;
 
 h3 {
   font-size: 1.25rem;
@@ -19,22 +21,19 @@ h3 {
     margin: 0;
   }
 
-  .glyphicon {
-    opacity: 0.12;
-    position: absolute;
-    left: 16px;
-    top: -24px;
-
-    &.icon-bottom {
-      top: 4px;
-    }
-
-    &::before {
-      font-size: 8em;
-    }
-  }
-
   .card-body {
     z-index: 2;
   }
 }
+
+my-global-icon {
+  opacity: 0.12;
+  position: absolute;
+  left: 16px;
+  top: -24px;
+  width: 110px;
+
+  &.icon-bottom {
+    top: 4px;
+  }
+}
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index 13c681ab8..dfce88e11 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,6 +1,7 @@
 
 import { NgModule } from '@angular/core'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
+import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { FeatureBooleanComponent } from './feature-boolean.component'
 import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@@ -12,6 +13,7 @@ import { InstanceService } from './instance.service'
 @NgModule({
   imports: [
     SharedMainModule,
+    SharedGlobalIconModule,
     NgbAccordionModule
   ],