geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.73bac9979

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -52,10 +52,7 @@ interface WfsDownloadUrls {
 export class DataService {
   constructor(private proxy: ProxyService) {}
 
-  getDownloadUrlsFromWfs(
-    wfsUrl: string,
-    featureTypeName: string
-  ): Observable<WfsDownloadUrls> {
+  getWfsEndpoint(wfsUrl: string): Observable<WfsEndpoint> {
     return from(
       new WfsEndpoint(this.proxy.getProxiedUrl(wfsUrl)).isReady()
     ).pipe(
@@ -78,7 +75,15 @@ export class DataService {
             throw new Error(`wfs.unreachable.unknown`)
           }
         }
-      }),
+      })
+    )
+  }
+
+  getDownloadUrlsFromWfs(
+    wfsUrl: string,
+    featureTypeName: string
+  ): Observable<WfsDownloadUrls> {
+    return this.getWfsEndpoint(wfsUrl).pipe(
       map((endpoint) => {
         const featureTypes = endpoint.getFeatureTypes()
         const featureType = endpoint.getFeatureTypeSummary(
@@ -127,6 +132,24 @@ export class DataService {
     )
   }
 
+  getWfsFeatureCount(
+    wfsUrl: string,
+    featureTypeName: string
+  ): Observable<number> {
+    return this.getWfsEndpoint(wfsUrl).pipe(
+      switchMap((endpoint) =>
+        from(endpoint.getFeatureTypeFull(featureTypeName)).pipe(
+          map((featureType) => {
+            if (!featureType) {
+              throw new Error('wfs.featuretype.notfound')
+            }
+            return featureType.objectCount
+          })
+        )
+      )
+    )
+  }
+
   getDownloadUrlFromEsriRest(apiUrl: string, format: string): string {
     return this.proxy.getProxiedUrl(
       `${apiUrl}/query?f=${format}&where=1=1&outFields=*`
@@ -174,7 +197,7 @@ export class DataService {
   }
 
   async getDownloadUrlsFromOgcApi(url: string): Promise<OgcApiCollectionInfo> {
-    const endpoint = new OgcApiEndpoint(this.proxy.getProxiedUrl(url))
+    const endpoint = new OgcApiEndpoint(url)
     return await endpoint.allCollections
       .then((collections) => {
         return endpoint.getCollectionInfo(collections[0].name)
@@ -185,7 +208,7 @@ export class DataService {
   }
 
   async getItemsFromOgcApi(url: string): Promise<OgcApiRecord> {
-    const endpoint = new OgcApiEndpoint(this.proxy.getProxiedUrl(url))
+    const endpoint = new OgcApiEndpoint(url)
     return await endpoint.featureCollections
       .then((collections) => {
         return collections.length

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.html

@@ -13,7 +13,7 @@
     <gn-ui-popup-alert
       *ngIf="error"
       type="warning"
-      icon="error_outline"
+      icon="matErrorOutlineOutline"
       class="absolute m-2 inset-0"
     >
       <span translate>{{ error }}</span>

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.ts

@@ -10,15 +10,28 @@ import {
 } from 'rxjs/operators'
 import { DataItem, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import { DataService } from '../service/data.service'
-import { TableItemModel } from '../../../../../../libs/ui/dataviz/src'
+import { TableComponent, TableItemModel } from '../../../../../../libs/ui/dataviz/src'
 import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import {
+  LoadingMaskComponent,
+  PopupAlertComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-table-view',
   templateUrl: './table-view.component.html',
   styleUrls: ['./table-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    TableComponent,
+    LoadingMaskComponent,
+    PopupAlertComponent,
+    TranslateModule,
+  ],
+  standalone: true,
 })
 export class TableViewComponent {
   @Input() set link(value: DatasetOnlineResource) {

package/src/libs/feature/editor/src/lib/+state/editor.actions.ts

@@ -1,6 +1,7 @@
 import { createAction, props } from '@ngrx/store'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SaveRecordError } from './editor.models'
+import { EditorFieldIdentification } from '../models'
 
 export const openRecord = createAction(
   '[Editor] Open record',
@@ -35,3 +36,18 @@ export const setCurrentPage = createAction(
   '[Editor] Set current page',
   props<{ page: number }>()
 )
+
+export const setFieldVisibility = createAction(
+  '[Editor] Set field visibility',
+  props<{ field: EditorFieldIdentification; visible: boolean }>()
+)
+
+export const hasRecordChangedSinceDraft = createAction(
+  '[Editor] Has Record Changed Since Draft',
+  props<{ record: CatalogRecord }>()
+)
+
+export const hasRecordChangedSinceDraftSuccess = createAction(
+  '[Editor] Has Record Changed Since Draft Success',
+  props<{ changes: { user: string; date: Date } }>()
+)

package/src/libs/feature/editor/src/lib/+state/editor.effects.ts

@@ -1,6 +1,6 @@
 import { inject, Injectable } from '@angular/core'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
-import { debounceTime, filter, of, withLatestFrom } from 'rxjs'
+import { debounceTime, EMPTY, filter, of, withLatestFrom } from 'rxjs'
 import { catchError, map, switchMap } from 'rxjs/operators'
 import * as EditorActions from './editor.actions'
 import { EditorService } from '../services/editor.service'
@@ -12,12 +12,14 @@ import {
   selectRecordSource,
 } from './editor.selectors'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { Gn4PlatformService } from '../../../../../../libs/api/repository/src'
 
 @Injectable()
 export class EditorEffects {
   private actions$ = inject(Actions)
   private editorService = inject(EditorService)
   private recordsRepository = inject(RecordsRepositoryInterface)
+  private gn4PlateformService = inject(Gn4PlatformService)
   private store = inject(Store)
 
   saveRecord$ = createEffect(() =>
@@ -46,7 +48,7 @@ export class EditorEffects {
             catchError((error) =>
               of(
                 EditorActions.saveRecordFailure({
-                  error: error.message,
+                  error,
                 })
               )
             )
@@ -55,6 +57,28 @@ export class EditorEffects {
     )
   )
 
+  cleanRecordAttachments$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(EditorActions.saveRecordSuccess),
+        withLatestFrom(this.store.select(selectRecord)),
+        switchMap(([_, record]) => {
+          this.gn4PlateformService.cleanRecordAttachments(record).subscribe({
+            next: (_) => undefined,
+            error: (err) => {
+              console.error(err)
+            },
+          })
+          return EMPTY
+        }),
+        catchError((error) => {
+          console.error(error)
+          return EMPTY
+        })
+      ),
+    { dispatch: false }
+  )
+
   markAsChanged$ = createEffect(() =>
     this.actions$.pipe(
       ofType(EditorActions.updateRecordField),
@@ -102,4 +126,19 @@ export class EditorEffects {
       map(() => EditorActions.markRecordAsChanged())
     )
   )
+
+  hasRecordChangedSinceDraft$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.hasRecordChangedSinceDraft),
+      switchMap(({ record }) =>
+        this.editorService
+          .hasRecordChangedSinceDraft(record)
+          .pipe(
+            map((changes) =>
+              EditorActions.hasRecordChangedSinceDraftSuccess({ changes })
+            )
+          )
+      )
+    )
+  )
 }

package/src/libs/feature/editor/src/lib/+state/editor.facade.ts

@@ -5,6 +5,7 @@ import * as EditorSelectors from './editor.selectors'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { filter } from 'rxjs'
 import { Actions, ofType } from '@ngrx/effects'
+import { EditorFieldIdentification } from '../models'
 
 @Injectable()
 export class EditorFacade {
@@ -31,6 +32,9 @@ export class EditorFacade {
   draftSaveSuccess$ = this.actions$.pipe(ofType(EditorActions.draftSaveSuccess))
   currentPage$ = this.store.pipe(select(EditorSelectors.selectCurrentPage))
   editorConfig$ = this.store.pipe(select(EditorSelectors.selectEditorConfig))
+  hasRecordChanged$ = this.store.pipe(
+    select(EditorSelectors.selectHasRecordChanged)
+  )
 
   openRecord(
     record: CatalogRecord,
@@ -40,6 +44,7 @@ export class EditorFacade {
     this.store.dispatch(
       EditorActions.openRecord({ record, recordSource, alreadySavedOnce })
     )
+    this.setCurrentPage(0)
   }
 
   saveRecord() {
@@ -57,4 +62,12 @@ export class EditorFacade {
   setCurrentPage(page: number) {
     this.store.dispatch(EditorActions.setCurrentPage({ page }))
   }
+
+  setFieldVisibility(field: EditorFieldIdentification, visible: boolean) {
+    this.store.dispatch(EditorActions.setFieldVisibility({ field, visible }))
+  }
+
+  checkHasRecordChanged(record: CatalogRecord) {
+    this.store.dispatch(EditorActions.hasRecordChangedSinceDraft({ record }))
+  }
 }

package/src/libs/feature/editor/src/lib/+state/editor.models.ts

@@ -1,6 +1,6 @@
 import { EditorField, EditorFieldValue, EditorSection } from '../models'
 
-export type SaveRecordError = string
+export type SaveRecordError = Error
 
 export interface EditorFieldWithValue {
   config: EditorField

package/src/libs/feature/editor/src/lib/+state/editor.reducer.ts

@@ -24,6 +24,7 @@ export interface EditorState {
   changedSinceSave: boolean
   editorConfig: EditorConfig
   currentPage: number
+  hasRecordChanged: { user: string; date: Date }
 }
 
 export interface EditorPartialState {
@@ -39,6 +40,7 @@ export const initialEditorState: EditorState = {
   changedSinceSave: false,
   editorConfig: DEFAULT_CONFIGURATION,
   currentPage: 0,
+  hasRecordChanged: null,
 }
 
 const reducer = createReducer(
@@ -83,6 +85,31 @@ const reducer = createReducer(
   on(EditorActions.setCurrentPage, (state, { page }) => ({
     ...state,
     currentPage: page,
+  })),
+  on(EditorActions.setFieldVisibility, (state, { field, visible }) => ({
+    ...state,
+    editorConfig: {
+      ...state.editorConfig,
+      pages: state.editorConfig.pages.map((page) => ({
+        ...page,
+        sections: page.sections.map((section) => ({
+          ...section,
+          fields: section.fields.map((f) => {
+            if (f.model === field.model) {
+              return {
+                ...f,
+                hidden: !visible,
+              }
+            }
+            return f
+          }),
+        })),
+      })),
+    },
+  })),
+  on(EditorActions.hasRecordChangedSinceDraftSuccess, (state, { changes }) => ({
+    ...state,
+    hasRecordChanged: changes,
   }))
 )
 

package/src/libs/feature/editor/src/lib/+state/editor.selectors.ts

@@ -61,3 +61,8 @@ export const selectRecordSections = createSelector(
     })) as EditorSectionWithValues[]
   }
 )
+
+export const selectHasRecordChanged = createSelector(
+  selectEditorState,
+  (state: EditorState) => state.hasRecordChanged
+)

package/src/libs/feature/editor/src/lib/components/constraint-card/constraint-card.component.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}

package/src/libs/feature/editor/src/lib/components/constraint-card/constraint-card.component.html

@@ -0,0 +1,28 @@
+<div class="flex flex-col gap-1 border rounded-lg p-4">
+  <gn-ui-form-field-rich
+    class="mt-[-8px]"
+    [label]="label"
+    [hint]="hint | translate"
+    [value]="constraint_.text ?? ''"
+    (valueChange)="handleConstraintTextChange($event)"
+  ></gn-ui-form-field-rich>
+
+  <div *ngIf="!showUrl" class="flex-none mt-1">
+    <gn-ui-button
+      (buttonClick)="showUrl = true"
+      type="gray"
+      data-cy="add-url-btn"
+    >
+      <ng-icon name="iconoirPlus" class="text-primary"></ng-icon>&nbsp;
+      <span translate>input.image.displayUrlInput</span>
+    </gn-ui-button>
+  </div>
+  <gn-ui-url-input
+    *ngIf="showUrl"
+    class="mt-3.5"
+    [value]="constraint_.url?.toString()"
+    (valueChange)="handleURLChange($event)"
+    [showUploadButton]="false"
+  >
+  </gn-ui-url-input>
+</div>

package/src/libs/feature/editor/src/lib/components/constraint-card/constraint-card.component.ts

@@ -0,0 +1,71 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MarkdownEditorComponent } from '../../../../../../../libs/ui/elements/src'
+import { FormFieldRichComponent } from '../record-form/form-field/form-field-rich/form-field-rich.component'
+import { ButtonComponent, UrlInputComponent } from '../../../../../../../libs/ui/inputs/src'
+import { MatIconModule } from '@angular/material/icon'
+import { TranslateModule } from '@ngx-translate/core'
+import { Constraint } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirPlus } from '@ng-icons/iconoir'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+@Component({
+  selector: 'gn-ui-constraint-card',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MarkdownEditorComponent,
+    FormFieldRichComponent,
+    UrlInputComponent,
+    ButtonComponent,
+    MatIconModule,
+    TranslateModule,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({ iconoirPlus }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
+  ],
+  templateUrl: './constraint-card.component.html',
+  styleUrls: ['./constraint-card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConstraintCardComponent {
+  @Input() label: string
+  constraint_: Constraint
+  @Input() set constraint(v: Constraint) {
+    this.constraint_ = v
+    this.showUrl = this.showUrl || !!v.url
+  }
+  @Output() constraintChange = new EventEmitter<Constraint>()
+
+  hint = marker('editor.record.form.constraint.markdown.placeholder')
+  showUrl = false
+
+  handleConstraintTextChange(text: string) {
+    this.constraintChange.emit({
+      ...this.constraint_,
+      text,
+    })
+  }
+
+  handleURLChange(url: string | null) {
+    this.constraintChange.emit({
+      text: this.constraint_.text,
+      ...(url && { url: new URL(url) }),
+    })
+  }
+}

package/src/libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { Individual } from '../../../../../../../libs/common/domain/src/lib/model/record'
-import { MatIconModule } from '@angular/material/icon'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
 import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
@@ -11,7 +10,7 @@ import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
   styleUrls: ['./contact-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, MatIconModule, ButtonComponent, ThumbnailComponent],
+  imports: [CommonModule, ButtonComponent, ThumbnailComponent],
 })
 export class ContactCardComponent {
   @Input() contact: Individual

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.css

@@ -0,0 +1,3 @@
+.badge-warning {
+  font-size: 1.4em;
+}

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html

@@ -4,9 +4,10 @@
     [displayWithFn]="displayWithFn"
     [action]="autoCompleteAction"
     (itemSelected)="handleItemSelection($event)"
-    [preventCompleteOnSelection]="true"
-    [minCharacterCount]="0"
+    [preventCompleteOnSelection]="false"
+    [minCharacterCount]="1"
     [allowSubmit]="false"
+    [clearOnSelection]="true"
   ></gn-ui-autocomplete>
   <div class="flex gap-2 flex-wrap">
     <gn-ui-badge
@@ -15,12 +16,12 @@
       (badgeRemoveClicked)="removeKeyword(keyword)"
       >{{ keyword.label }}
 
-      <mat-icon
+      <ng-icon
         *ngIf="isPlaceWithoutExtent(keyword)"
         [title]="'editor.form.placeKeywordWithoutExtent' | translate"
-        class="material-symbols-outlined"
-        >warning</mat-icon
-      >
+        class="badge-warning"
+        name="matWarningAmberOutline"
+      ></ng-icon>
     </gn-ui-badge>
   </div>
 </div>

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts

@@ -16,8 +16,13 @@ import { UiWidgetsModule } from '../../../../../../../libs/ui/widgets/src'
 import { map } from 'rxjs'
 import { Keyword } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
-import { MatIconModule } from '@angular/material/icon'
 import { TranslateModule } from '@ngx-translate/core'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
 
 type AutocompleteItem = { title: string; value: Keyword }
 
@@ -33,8 +38,13 @@ type AutocompleteItem = { title: string; value: Keyword }
     CommonModule,
     UiWidgetsModule,
     AutocompleteComponent,
-    MatIconModule,
     TranslateModule,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      matWarningAmberOutline,
+    }),
   ],
 })
 export class GenericKeywordsComponent {

package/src/libs/feature/editor/src/lib/components/import-record/import-record.component.html

@@ -15,8 +15,7 @@
             [title]="
               (menuItem.disabled ? 'editor.temporary.disabled' : '') | translate
             "
-            ><mat-icon class="material-symbols-outlined">
-              {{ menuItem.icon }} </mat-icon
+            ><ng-icon [name]="menuItem.icon"></ng-icon
             ><span>{{ menuItem.label }}</span></gn-ui-button
           >
         </li>
@@ -34,12 +33,12 @@
           type="light"
           (buttonClick)="displayMainMenu()"
         >
-          <mat-icon class="material-symbols-outlined">arrow_back</mat-icon>
+          <ng-icon name="iconoirArrowLeft"></ng-icon>
         </gn-ui-button>
         <span class="font-bold"> {{ externalImportBackLabel }}</span>
       </div>
       <gn-ui-url-input
-        (valueChange)="importRecord($event)"
+        (uploadClick)="importRecord($event)"
         [disabled]="isRecordImportInProgress"
       ></gn-ui-url-input>
     </div>

package/src/libs/feature/editor/src/lib/components/import-record/import-record.component.ts

@@ -5,7 +5,6 @@ import {
   EventEmitter,
   Output,
 } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent, UrlInputComponent } from '../../../../../../../libs/ui/inputs/src'
 import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
@@ -13,6 +12,17 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { NotificationsService } from '../../../../../../../libs/feature/notifications/src'
 import { RecordsRepositoryInterface } from '../../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { Router } from '@angular/router'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  iconoirArrowLeft,
+  iconoirAttachment,
+  iconoirImport,
+  iconoirLightBulbOn,
+} from '@ng-icons/iconoir'
 
 interface ImportMenuItems {
   label: string
@@ -32,29 +42,39 @@ type ImportMenuPage = 'mainMenu' | 'importExternalFile'
   standalone: true,
   imports: [
     CommonModule,
-    MatIconModule,
     ButtonComponent,
     ThumbnailComponent,
     UrlInputComponent,
     TranslateModule,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirImport,
+      iconoirLightBulbOn,
+      iconoirArrowLeft,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class ImportRecordComponent {
   @Output() closeImportMenu = new EventEmitter<void>()
 
   importMenuItems: ImportMenuItems[] = [
-    {
-      label: this.translateService.instant('dashboard.importRecord.useModel'),
-      icon: 'highlight',
-      action: () => null,
-      dataTest: 'useAModelButton',
-      disabled: true,
-    },
+    // {
+    //   label: this.translateService.instant('dashboard.importRecord.useModel'),
+    //   icon: 'iconoirLightBulbOn',
+    //   action: () => null,
+    //   dataTest: 'useAModelButton',
+    //   disabled: true,
+    // },
     {
       label: this.translateService.instant(
         'dashboard.importRecord.importExternal'
       ),
-      icon: 'cloud_download',
+      icon: 'iconoirImport',
       action: this.displayImportExternal.bind(this),
       dataTest: 'importFromUrlButton',
     },
@@ -122,7 +142,8 @@ export class ImportRecordComponent {
               'editor.record.importFromExternalFile.failure.body'
             )} ${error.message ?? ''}`,
           },
-          2500
+          2500,
+          error
         )
         this.isRecordImportInProgress = false
         this.cdr.markForCheck()

package/src/libs/feature/editor/src/lib/components/online-resource-card/online-resource-card.component.html

@@ -2,7 +2,7 @@
   <div
     class="bg-gray-100 w-[56px] h-[56px] rounded-[4px] text-primary grid justify-center items-center shrink-0"
   >
-    <mat-icon class="material-symbols-outlined">attach_file</mat-icon>
+    <ng-icon name="iconoirAttachment"></ng-icon>
   </div>
   <div class="flex flex-col w-full items-start overflow-hidden leading-snug">
     <div class="text-[16px] font-bold text-main" data-test="card-title">

package/src/libs/feature/editor/src/lib/components/online-resource-card/online-resource-card.component.ts

@@ -12,10 +12,15 @@ import {
   OnlineResource,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
-import { MatIconModule } from '@angular/material/icon'
 import { bytesToMegabytes, getFileFormat } from '../../../../../../../libs/util/shared/src'
 import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
 import { TranslateModule } from '@ngx-translate/core'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirAttachment } from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-online-resource-card',
@@ -23,9 +28,17 @@ import { TranslateModule } from '@ngx-translate/core'
   imports: [
     CommonModule,
     ThumbnailComponent,
-    MatIconModule,
     ButtonComponent,
     TranslateModule,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirAttachment,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
   templateUrl: './online-resource-card.component.html',
   styleUrls: ['./online-resource-card.component.css'],