Tabler Icons V2.40.0 does not work with Angular v17.0.0 using Standalone Components and SSR about angular-tabler-icons HOT 2 OPEN

You do not need to import IconsModule into app.config.ts. With standalone components, simply import the IconsModule into your component, like this:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { IconsModule } from './icons.module';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, IconsModule], // <----- import here
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'My App';
}

If you want to pick only specific icons in your standalone component, import the TablerIconsProvider like this:

import { Component } from '@angular/core';
import { TablerIconsModule, TablerIconsProvider } from 'angular-tabler-icons';
import { IconBrandGithub } from 'angular-tabler-icons/icons';


@Component({
  selector: 'app-standalone',
  templateUrl: './standalone.component.html',
  standalone: true,
  imports: [
    TablerIconsModule,
  ],
  providers: [
    TablerIconsProvider.pick({
      IconBrandGithub
    })
  ]
})
export class StandaloneComponent {
}

Then, you can use Angular Tabler Icons component the standard way, for example:

<i-tabler name="brand-github"></i-tabler>

Is it working for you?

from angular-tabler-icons.

You do not need to import IconsModule into app.config.ts. With standalone components, simply import the IconsModule into your component, like this:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { IconsModule } from './icons.module';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, IconsModule], // <----- import here
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'My App';
}

If you want to pick only specific icons in your standalone component, import the TablerIconsProvider like this:

import { Component } from '@angular/core';
import { TablerIconsModule, TablerIconsProvider } from 'angular-tabler-icons';
import { IconBrandGithub } from 'angular-tabler-icons/icons';


@Component({
  selector: 'app-standalone',
  templateUrl: './standalone.component.html',
  standalone: true,
  imports: [
    TablerIconsModule,
  ],
  providers: [
    TablerIconsProvider.pick({
      IconBrandGithub
    })
  ]
})
export class StandaloneComponent {
}

Then, you can use Angular Tabler Icons component the standard way, for example:

<i-tabler name="brand-github"></i-tabler>

Is it working for you?

Hi @pierreavn sorry for the delay, I have been a bit bussy. I really appreciate your comment. Your approach did not work for me, now it shows me the next error:

ERROR RuntimeError2: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
    at injectInjectorOnly (/projects/devjagz-portfolio/.angular/vite-root/devjagz-portfolio/node_modules/angular-tabler-icons/node_modules/@angular/core/fesm2022/core.mjs:908:5)
    at ɵɵinject2 (/projects/devjagz-portfolio/.angular/vite-root/devjagz-portfolio/node_modules/angular-tabler-icons/node_modules/@angular/core/fesm2022/core.mjs:998:53)
    at Object.TablerIconsModule_Factory (/projects/devjagz-portfolio/.angular/vite-root/devjagz-portfolio/node_modules/angular-tabler-icons/fesm2020/angular-tabler-icons.mjs:88:43)
    at Object.factory (/projects/devjagz-portfolio/.angular/vite-root/devjagz-portfolio/node_modules/@angular/core/fesm2022/core.mjs:6121:23)
    at eval (/projects/devjagz-portfolio/.angular/vite-root/devjagz-portfolio/node_modules/@angular/core/fesm2022/core.mjs:6028:10)
    at runInInjectorProfilerContext (/projects/devjagz-portfolio/.angular/vite-root/devjagz-portfolio/node_modules/@angular/core/fesm2022/core.mjs:873:5)
    at R3Injector.hydrate (/projects/devjagz-portfolio/.angular/vite-root/devjagz-portfolio/node_modules/@angular/core/fesm2022/core.mjs:6027:11)
    at R3Injector.get (/projects/devjagz-portfolio/.angular/vite-root/devjagz-portfolio/node_modules/@angular/core/fesm2022/core.mjs:5907:7)
    at injectInjectorOnly (/projects/devjagz-portfolio/.angular/vite-root/devjagz-portfolio/node_modules/@angular/core/fesm2022/core.mjs:912:12)
    at ɵɵinject (/projects/devjagz-portfolio/.angular/vite-root/devjagz-portfolio/node_modules/@angular/core/fesm2022/core.mjs:998:53) {
  code: -203
}

This is my current code:

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { TablerIconsModule, TablerIconsProvider  } from 'angular-tabler-icons';
import { IconBrandGithub } from 'angular-tabler-icons/icons';

@Component({
  selector: 'app-main-page',
  standalone: true,
  imports: [CommonModule, RouterOutlet, TablerIconsModule],
  providers: [
    TablerIconsProvider.pick({
      IconBrandGithub
    })
  ],
  templateUrl: './main-page.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MainPageComponent {

}

from angular-tabler-icons.