Bug Report - Icons Not Visible After Downgrading to @kolkov/angular-editor 2.1.0 (Angular 17)

[iamvibhakar]

Description:

• I downgraded Angular Editor from v3.0.0-beta.0 to v2.1.0 because Angular 17 does not support versions above 3.x of angular-editor.
  After the downgrade, the toolbar icons are not visible. Only blank button boxes are shown (screenshot attached).

Reason for Downgrade:

• Angular 17 is not compatible with @kolkov/angular-editor 3.x, so I had to move back to 2.1.0.

Issue:

• Toolbar renders, but icons (SVG/FontAwesome) are missing.
• No related errors in the console.
• Works fine locally, but icons still do not appear in dev environment.

Environment:

• Angular: 17
• angular-editor: 2.1.0
• FontAwesome: ^4.7.0

Expected:

• Icons should load normally as in the previous version.

Actual:

• Toolbar shows empty squares instead of icons (as in screenshot).

Screenshot:

Request:

• Please guide on whether 2.1.0 requires a specific FontAwesome setup or if there is an asset loading issue in Angular 17 builds.

Thanks !

[kolkov]

Hi @iamvibhakar,

The v2.x versions require Font Awesome 4.x to be properly loaded in your project. Here's what you need to check:

1. Make sure Font Awesome CSS is loaded globally. Add to your angular.json styles array:

   "styles": [
   "node_modules/font-awesome/css/font-awesome.min.css",
   "src/styles.scss"
   ]

2. Or add via CDN in your index.html:

3. If you're using CSS modules or ViewEncapsulation, make sure Font Awesome styles are not being scoped.

Side note: v3.x actually supports Angular 17! The "Angular 13+" in our docs means "Angular 13 and newer". If you'd like to use v3.x, simply run:

npm install @kolkov/angular-editor@3.0.3

v3.x uses SVG icons (no Font Awesome dependency), but requires copying icons to your assets folder as described in the README.

Let me know if this helps!

[enderfare]

This also happens on v3 in angular 21