Replace all glyphicon icons

23 files changed, 77 insertions, 68 deletions

diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index bb87279d7..b04d46e32 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -19,7 +19,8 @@
         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
           class="ms-auto muted abuse-details-links" i18n
         >
-          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span>
+          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}
+          <my-global-icon iconName="flag"></my-global-icon>
         </a>
       </span>
     </div>
@@ -39,7 +40,8 @@
         <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
           class="ms-auto muted abuse-details-links" i18n
         >
-          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span>
+          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}
+          <my-global-icon iconName="flag"></my-global-icon>
         </a>
       </span>
     </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
index 37bf4cc56..bd43ed459 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@@ -15,3 +15,7 @@
 .abuse-details-links {
   @include disable-default-a-behaviour;
 }
+
+my-global-icon[iconName=flag] {
+  width: 15px;
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 6d1de808d..f79054d03 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -70,7 +70,7 @@
             </span>
 
             <span name>
-              <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
+              <my-global-icon *ngIf="abuse.video.blacklisted" iconName="no" i18n-title title="The video was blocked"></my-global-icon>
             </span>
           </my-video-cell>
         </td>
@@ -80,7 +80,7 @@
             <div class="table-video-text">
               <div>
                 {{ abuse.video.name }}
-                <span class="glyphicon glyphicon-trash"></span>
+                <my-global-icon iconName="delete"></my-global-icon>
               </div>
               <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
             </div>
@@ -116,8 +116,8 @@
       <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short'  }}</td>
 
       <td class="c-hand abuse-states" [pRowToggler]="abuse">
-        <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span>
-        <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span>
+        <my-global-icon *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" iconName="tick"></my-global-icon>
+        <my-global-icon *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" iconName="cross"></my-global-icon>
       </td>
 
       <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index 2d8acae58..4852f2e8b 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -7,10 +7,6 @@
   color: var(--greyForegroundColor);
 }
 
-.abuse-states .glyphicon-comment {
-  @include margin-left(0.5rem);
-}
-
 .abuse-messages {
   my-global-icon {
     @include margin-left(3px);
@@ -20,3 +16,10 @@
     top: -2px;
   }
 }
+
+.table-video-text my-global-icon,
+my-video-cell my-global-icon {
+  width: 15px;
+  position: relative;
+  top: -2px;
+}
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index 1d6b3df7e..e4f318385 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -25,5 +25,5 @@
     (keyup)="onInputSearch($event)"
   >
 
-  <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></a>
+  <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></my-global-icon>
 </div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
index f7f9ce403..669b5f32e 100644
--- a/client/src/app/shared/shared-forms/input-text.component.html
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -5,8 +5,9 @@
     #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
   />
 
-  <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle">
-    <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
+  <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
+    <my-global-icon *ngIf="show" iconName="sensitive"></my-global-icon>
+    <my-global-icon *ngIf="!show" iconName="unsensitive"></my-global-icon>
   </button>
 
   <button
diff --git a/client/src/app/shared/shared-forms/input-text.component.scss b/client/src/app/shared/shared-forms/input-text.component.scss
index cc1646a69..253793196 100644
--- a/client/src/app/shared/shared-forms/input-text.component.scss
+++ b/client/src/app/shared/shared-forms/input-text.component.scss
@@ -9,10 +9,8 @@ input {
 
 .btn {
   font-size: 15px;
-}
 
-my-global-icon {
-  width: 18px;
+  @include button-with-icon(18px);
 }
 
 .copy-text {
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index ed4637c17..d9722e6c6 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -1,6 +1,7 @@
 import { Component, forwardRef, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
+import { GlobalIconName } from '../shared-icons'
 
 @Component({
   selector: 'my-input-text',
@@ -47,6 +48,12 @@ export class InputTextComponent implements ControlValueAccessor {
     this.notifier.success($localize`Copied`)
   }
 
+  getEyeIcon (): GlobalIconName {
+    if (this.show) return 'sensitive'
+
+    return 'unsensitive'
+  }
+
   propagateChange = (_: any) => { /* empty */ }
 
   writeValue (value: string) {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index 43c407743..8b864fd5f 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -91,6 +91,7 @@ export type GlobalIconName = keyof typeof icons
 })
 export class GlobalIconComponent implements OnInit {
   @Input() iconName: GlobalIconName
+  @Input() width: string
 
   constructor (
     private el: ElementRef,
@@ -106,6 +107,10 @@ export class GlobalIconComponent implements OnInit {
       'filter:internal.common.svg-icons.get-content.params',
       'filter:internal.common.svg-icons.get-content.result'
     )
+
+    if (this.width) {
+      nativeElement.style.width = this.width
+    }
   }
 
   private getSVGContent (options: { name: string }) {
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
   ],
 
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index ce8685a09..bd038f8b5 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -12,7 +12,7 @@ export class LoaderComponent {
     sm: {
       width: '1rem',
       height: '1rem',
-      'border-width': '.2em'
+      'border-width': '0.15rem'
     },
     xl: {
       width: '3rem',
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index 11f5a1ab0..ae57ca5b7 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -10,7 +10,7 @@
       [placeholder]="placeholder"
     >
 
-    <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></a>
+    <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
   </div>
 
   <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index d5fcff760..ee0f7a8d2 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -5,7 +5,7 @@
   display: flex;
 }
 
-my-global-icon {
+.root > my-global-icon {
   @include margin-left(10px);
 
   height: 28px;
@@ -25,3 +25,7 @@ input {
     box-shadow: 0 0 5px 0 #a5a5a5;
   }
 }
+
+.input-group > my-global-icon {
+  width: 20px;
+}
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 0658ae962..1b99a6c1e 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -266,7 +266,7 @@
              [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
 
           <ng-container *ngIf="isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-down"></span>
+            <span class="chevron-down"></span>
 
             <ng-container i18n>
               More customization
@@ -274,7 +274,7 @@
           </ng-container>
 
           <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-            <span class="glyphicon glyphicon-menu-up"></span>
+            <span class="chevron-up"></span>
 
             <ng-container i18n>
               Less customization
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 6123bc517..611291981 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -49,10 +49,6 @@ my-input-text {
     font-size: 16px;
     font-weight: $font-semibold;
     cursor: pointer;
-
-    .glyphicon {
-      @include margin-right(5px);
-    }
   }
 
   .video-caption-block {
diff --git a/client/src/app/shared/shared-tables/table-expander-icon.component.ts b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
index 3756b475a..66bbfe6fb 100644
--- a/client/src/app/shared/shared-tables/table-expander-icon.component.ts
+++ b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core'
   selector: 'my-table-expander-icon',
   template: `
 <span class="expander">
-    <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+    <i [ngClass]="expanded ? 'chevron-down' : 'chevron-right'"></i>
 </span>`
 })
 export class TableExpanderIconComponent {
diff --git a/client/src/app/shared/shared-tables/video-cell.component.scss b/client/src/app/shared/shared-tables/video-cell.component.scss
index 7efb61502..5d26b02ef 100644
--- a/client/src/app/shared/shared-tables/video-cell.component.scss
+++ b/client/src/app/shared/shared-tables/video-cell.component.scss
@@ -59,13 +59,6 @@
     color: pvar(--mainForegroundColor);
     line-height: 1rem;
 
-    div .glyphicon {
-      @include margin-left(0.1rem);
-
-      font-size: 80%;
-      color: #808080;
-    }
-
     div + div {
       color: var(--greyForegroundColor);
       font-size: 11px;
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index e8990747a..1c7458b4b 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -120,7 +120,7 @@
         [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
       >
         <ng-container *ngIf="isAdvancedCustomizationCollapsed">
-          <span class="glyphicon glyphicon-menu-down"></span>
+          <span class="chevron-down"></span>
 
           <ng-container i18n>
             Advanced
@@ -128,7 +128,7 @@
         </ng-container>
 
         <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
-          <span class="glyphicon glyphicon-menu-up"></span>
+          <span class="chevron-up"></span>
 
           <ng-container i18n>
             Simple
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index bd42f4813..eb9c57b2f 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -17,10 +17,6 @@
   .nav-tabs {
     margin-top: 10x;
   }
-
-  .glyphicon {
-    @include margin-right(5px);
-  }
 }
 
 .peertube-select-container.title-select {