From 06070b029307fec9b980fff74165c4d338dc2b4a Mon Sep 17 00:00:00 2001
From: wwang <wwang.works@gmail.com>
Date: Mon, 14 Dec 2020 19:02:26 +0100
Subject: [PATCH] [FIX TRTL-522] Add Category Icons
---
.../starter-kit/src/app/app-routing.module.ts | 3 +-
.../starter-kit/src/app/app.component.html | 1 +
.../starter-kit/src/app/app.module.ts | 2 +
.../app/components/icons/icons.component.html | 1252 +++++++++++++++++
.../app/components/icons/icons.component.scss | 35 +
.../app/components/icons/icons.component.ts | 18 +
.../src/app/components/icons/icons.module.ts | 16 +
.../starter-kit/src/assets/i18n/en.json | 3 +
.../starter-kit/src/assets/i18n/fr.json | 3 +
9 files changed, 1332 insertions(+), 1 deletion(-)
create mode 100644 ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.html
create mode 100644 ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.scss
create mode 100644 ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.ts
create mode 100644 ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.module.ts
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/app-routing.module.ts b/ui/ui-frontend/projects/starter-kit/src/app/app-routing.module.ts
index f9cd8edee..cae774f63 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/app-routing.module.ts
+++ b/ui/ui-frontend/projects/starter-kit/src/app/app-routing.module.ts
@@ -47,6 +47,7 @@ import { ProgressBarComponent } from './components/progress-bar/progress-bar.com
import { TooltipComponent } from './components/tooltip/tooltip.component';
import { TypographyComponent } from './components/typography/typography.component';
import { ColorsComponent } from './components/colors/colors.component';
+import { IconsComponent } from './components/icons/icons.component';
import { StarterKitComponent } from './starter-kit/starter-kit.component';
@@ -62,7 +63,7 @@ const routes: Routes = [
{ path: 'miscellaneous', component: MiscellaneousComponent, data: { appId: ApplicationId.STARTER_KIT_APP } },
{ path: 'typography', component: TypographyComponent, data: { appId: ApplicationId.STARTER_KIT_APP } },
{ path: 'colors', component: ColorsComponent, data: { appId: ApplicationId.STARTER_KIT_APP } },
-
+ { path: 'icons', component: IconsComponent, data: { appId: ApplicationId.STARTER_KIT_APP } },
{ path: '**', redirectTo: '' },
];
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/app.component.html b/ui/ui-frontend/projects/starter-kit/src/app/app.component.html
index a5ba2aeeb..d86c3a439 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/app.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/app.component.html
@@ -17,6 +17,7 @@
<mat-list-item routerLink="/miscellaneous">Miscellaneous</mat-list-item>
<mat-list-item routerLink="/typography">Typography</mat-list-item>
<mat-list-item routerLink="/colors">Colors</mat-list-item>
+ <mat-list-item routerLink="/icons">Icons</mat-list-item>
<mat-list-item routerLink=""><i class="material-icons">help</i></mat-list-item>
</mat-list>
</mat-sidenav>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/app.module.ts b/ui/ui-frontend/projects/starter-kit/src/app/app.module.ts
index 02278cc37..2c4a28d35 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/app.module.ts
+++ b/ui/ui-frontend/projects/starter-kit/src/app/app.module.ts
@@ -61,6 +61,7 @@ import { ProgressBarModule } from './components/progress-bar/progress-bar.module
import { TooltipModule } from './components/tooltip/tooltip.module';
import { TypographyModule } from './components/typography/typography.module';
import { ColorsModule } from './components/colors/colors.module';
+import { IconsModule } from './components/icons/icons.module';
import { StarterKitModule } from './starter-kit/starter-kit.module';
registerLocaleData(localeFr, 'fr');
@@ -95,6 +96,7 @@ export function httpLoaderFactory(httpClient: HttpClient): MultiTranslateHttpLoa
TypographyModule,
TooltipModule,
ColorsModule,
+ IconsModule,
MatCardModule,
MatSidenavModule,
MatListModule,
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.html
new file mode 100644
index 000000000..faa5e80f7
--- /dev/null
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.html
@@ -0,0 +1,1252 @@
+<h4>{{'ICONS.Title' | translate}}</h4>
+
+<ul>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-mobile"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">mobile</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-gestion-de-profil"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">gestion-de-profil</span>
+ </div>
+ </li>
+
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-add"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">add</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-anomalie"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">anomalie</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-attribution-liste"
+ ><span class="path1"></span><span class="path2"></span
+ ><span class="path3"></span><span class="path4"></span
+ ><span class="path5"></span><span class="path6"></span
+ ><span class="path7"></span
+ ></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">attribution-liste</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-bordereau"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">bordereau</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-calendar"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">calendar</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-chevron-down"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">chevron-down</span>
+ </div>
+ </li>
+
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-chevron-left"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">chevron-left</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-chevron-up"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">chevron-up</span>
+ </div>
+ </li>
+
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-client-proprietaire"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">client-proprietaire</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-close"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">close</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-comment"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">comment</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-consultation-produit"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">consultation-produit</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-content-copy"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">content-copy</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-delete"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">delete</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-desktop"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">desktop</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-document-seriel"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">document-seriel</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-done"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">done</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-dossier-fichier"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">dossier-fichier</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-dossier-solidaire"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">dossier-solidaire</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-edit"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">edit</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-Edition"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">Edition</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-edit-off"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">edit-off</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-entree"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">entree</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-filter-list"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">filter-list</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-flux-industriel-refus"
+ ><span class="path1"></span><span class="path2"></span
+ ><span class="path3"></span><span class="path4"></span
+ ><span class="path5"></span
+ ></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">flux-industriel-refus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-flux-manuel-refus"
+ ><span class="path1"></span><span class="path2"></span
+ ><span class="path3"></span><span class="path4"></span
+ ><span class="path5"></span><span class="path6"></span
+ ></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">flux-manuel-refus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-gele"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">gele</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-gestion-de-profil"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">gestion de profil</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-home"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">home</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-home-add"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">home-add</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-import-export"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">import-export</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-info"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">info</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-lock-open"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">lock-open</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-more-horiz"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">more-horiz</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-more-vert"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">more-vert</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-notifications"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">notifications</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-pause"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">pause</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-picking"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">picking</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-plan-classement"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">plan-classement</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-position"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">position</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-print"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">print</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-Rangement-Dplacement"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">Rangement-Dplacement</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-recherche-postee"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">recherche-postee</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-Regroupement"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">Regroupement</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-remove"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">remove</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-repeat"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">repeat</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-salle"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">salle</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-scanner"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">scanner</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-search"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">search</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-serie"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">serie</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-settings"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">settings</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-share"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">share</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-site"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">site</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-Sortie-massive"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">Sortie-massive</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-telecharger"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">telecharger</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-tenant-add"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">tenant-add</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-tenant-proprietaire"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">tenant-proprietaire</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-transfert"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">transfert</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-Transfert-intersite"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">Transfert-intersite</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-type-archives"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">type-archives</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-unfold-more"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">unfold-more</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-Utilisateur-attribuer"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">Utilisateur-attribuer</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-Vrification-de-contenu"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">Vrification-de-contenu</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-versement"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">versement</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-visibility"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">visibility</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-workflow"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">workflow</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-barcode"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">barcode</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-rack"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">rack</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-room"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">room</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-folder-full"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">folder-full</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-folder-with-file"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">folder-with-file</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-document-layers"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">document-layers</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-file-cog-middle"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">file-cog-middle</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-file-cog-up"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">file-cog-up</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-api-supervision"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">api-supervision</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-truck"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">truck</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-physical-big-box"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">physical-big-box</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-physical-big-box-content"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">physical-big-box-content</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-physical-small-box"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">physical-small-box</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-physical-small-box-content"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">physical-small-box-content</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-folder"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">folder</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-folder-content"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">folder-content</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-archive-ingest"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">archive-ingest</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-tree-arrow"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">tree-arrow</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-tree-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">tree-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-tree-minus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">tree-minus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-item"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">item</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-circle-chevron"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">circle-chevron</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-checklist-pen"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">checklist-pen</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-gear"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">gear</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-electronic-folder"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">electronic-folder</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-electronic-file"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">electronic-file</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-support-check-list"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">support-check-list</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-admin-check-list"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">admin-check-list</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-user-board"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">user-board</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-layer"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">layer</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-layers"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">layers</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-info-circle"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">info-circle</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-danger"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">danger</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-lock"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">lock</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-refresh"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">refresh</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-cycle-gear"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">cycle-gear</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-docuware-logo"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">docuware-logo</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-alfresco-logo"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">alfresco-logo</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-chevron-right"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">chevron-right</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-chevron-right-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">chevron-right-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-user-key-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">user-key-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-user-key"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">user-key</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-exclamation-point"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">exclamation-point</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-file"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">file</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-download"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">download</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-safe-key-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">safe-key-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-admin-key-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">admin-key-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-keys-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">keys-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-filing"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">filing</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-basket"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">basket</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-support-box"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">support-box</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-admin-box"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">admin-box</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-triangle"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">triangle</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-box"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">box</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-box-arrow"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">box-arrow</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-box-hand"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">box-hand</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-box-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">box-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-user"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">user</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-user-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">user-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-pin"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">pin</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-bank-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">bank-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-key-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">key-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-safe-plus"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">safe-plus</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-key"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">key</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-safe"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">safe</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-safe-gear"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">safe-gear</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-light-bulb"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">light-bulb</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-link"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">link</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-box-gear"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">box-gear</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-safe-key"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">safe-key</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-board"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">board</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-deposit"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">deposit</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-box-check"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">box-check</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-question-mark"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">question-mark</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-user-keys"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">user-keys</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-admin-key"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">admin-key</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-bank"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">bank</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-keys"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">keys</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-link-key"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">link-key</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-return-box"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">return-box</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-safe-search"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">safe-search</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-search-safe"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">search-safe</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-support-keys"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">support-keys</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-cross"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">cross</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-archive-room"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">archive-room</span>
+ </div>
+ </li>
+</ul>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.scss b/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.scss
new file mode 100644
index 000000000..f9c950c56
--- /dev/null
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.scss
@@ -0,0 +1,35 @@
+i {
+ font-size: 40px;
+ line-height: 100px;
+ text-align: center;
+ color: var(--vitamui-grey-600);
+}
+ul {
+ list-style: none;
+ display: flex;
+ background-color: var(--vitamui-grey-300);
+ flex-wrap: wrap;
+ justify-content: center;
+ padding-top: 50px;
+}
+.icon-container {
+ width: 100px;
+ height: 100px;
+ background-color: var(--vitamui-grey-100);
+ margin-right: 20px;
+ border-radius: 6px;
+ text-align: center;
+}
+
+.text-container {
+ width: 100px;
+ height: 100px;
+ padding-top: 10px;
+}
+span.text-container {
+ display: flex;
+ align-items: center;
+ letter-spacing: 0.4px;
+ color: var(--vitamui-grey-800);
+}
+
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.ts b/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.ts
new file mode 100644
index 000000000..db3450f14
--- /dev/null
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+ selector: 'starter-kit-icons',
+ templateUrl: './icons.component.html',
+ styleUrls: ['./icons.component.scss']
+})
+export class IconsComponent implements OnInit {
+
+ public control = new FormControl();
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.module.ts b/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.module.ts
new file mode 100644
index 000000000..35ed57b65
--- /dev/null
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconsComponent } from './icons.component';
+import { VitamUICommonModule } from 'ui-frontend-common';
+
+
+
+@NgModule({
+ declarations: [IconsComponent],
+ imports: [
+ CommonModule,
+ VitamUICommonModule
+ ],
+ exports:[IconsComponent]
+})
+export class IconsModule { }
diff --git a/ui/ui-frontend/projects/starter-kit/src/assets/i18n/en.json b/ui/ui-frontend/projects/starter-kit/src/assets/i18n/en.json
index 00fe4bfb9..1dcc7b3fb 100644
--- a/ui/ui-frontend/projects/starter-kit/src/assets/i18n/en.json
+++ b/ui/ui-frontend/projects/starter-kit/src/assets/i18n/en.json
@@ -26,5 +26,8 @@
"Red": "Color red",
"Orange": "Color orange",
"Green": "Color green"
+ },
+ "ICONS":{
+ "Title": "Vitam-UI icons list"
}
}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/starter-kit/src/assets/i18n/fr.json b/ui/ui-frontend/projects/starter-kit/src/assets/i18n/fr.json
index c98e9042a..3c6d9d283 100644
--- a/ui/ui-frontend/projects/starter-kit/src/assets/i18n/fr.json
+++ b/ui/ui-frontend/projects/starter-kit/src/assets/i18n/fr.json
@@ -26,5 +26,8 @@
"Red": "Couleur rouge",
"Orange": "Couleur orange",
"Green": "Couleur vert"
+ },
+ "ICONS":{
+ "Title": "Liste des icônes de Vitam-UI"
}
}
\ No newline at end of file
--
GitLab