Editor icons are not loading

[geekdeb]

I am trying on Angular-14 and angular-editor-2.2.0-beta.0. The Editor icons are not loading.

Also, I could see these errors in the console. And I guess this is due to the removal of the CDN link in the latest merge.

Kindly let me know the workaround if any.

[pietzschke]

Yes, please use the new v3.0.0-beta.0 version and include the following in the assets section in the angular.json:

{
  "glob": "**/*",
  "input": "./node_modules/@kolkov/angular-editor/assets/",
  "output": "./assets/fonts/"
}

[alex-goods]

hi
i tried this approach but its still not working, i have no console errors but the icons are not showing, i can see them in the devtools but the button is empty

thx

[anandjaisy]

"assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@kolkov/angular-editor/assets/",
                "output": "./assets/fonts/"
              }
            ],

worked for me

[T4toh]

Have the same issue.

[ArturGudiev]

There are 2 assets. build and test in angular.json

Make sure you included it into build assets like this

[T4toh]

There are 2 assets. build and test in angular.json

Make sure you included it into build assets

I fix the issue installing awesome fonts or something like that. I couldn't find the dependency in the documentation, but the dev of the package talk about it in an issue like this one.

[alex-goods]

anandjaisy

this worked for me too, thx:>

[philecom]

If the above solutions don't work for you, you can try what I did.

1. Copy the entire content of "node_modules@kolkov\angular-editor\assets"
2. Create a folder called "fonts" in your app assets folder so you will have "src\assets\fonts"
3. Paste the copied contents (font awesome files).

that's all.

[youquijano]

"assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@kolkov/angular-editor/assets/",
                "output": "./assets/fonts/"
              }
            ],

worked for me

this also worked for me.

[youquijano]

i run this cli
ng build --c=production --base-href /mysite/

but still the icons are not showing. what am i missing?

[dmitrikovalevski]

I moved object with { glob, input, output } above. It take first position below all strings. This works for me.

[veer05]

Same issue, I use --base-href and the application is trying to look at parent path and fails
Temporary workaround

In index.html file add this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 2. In your css file add this

::ng-deep angular-editor-toolbar button i {
  font-family: FontAwesome !important; 
  } 

[Pimpollo30]

Same issue, I use --base-href and the application is trying to look at parent path and fails Temporary workaround

In index.html file add this <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 2. In your css file add this

::ng-deep angular-editor-toolbar button i {
  font-family: FontAwesome !important; 
  } 

@veer05 temporary solution worked for me, thanks

[ZenulAbidin]

This might be obvious but also check that your font was not set to a white color by accident by some framework - in that case the fonts are actually loaded but you might be fooled into thinking they are not present.

[qqaimh]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[BraianS]

Good morning everyone, it worked perfectly.

[mohaseebtariq]

#573

I fixed this by adding the font, and it worked initially. But when I added a glob in angular.json to include icons in my build, they still wouldn’t show up when running locally. Another issue was that my app has a baseUrl, so all assets load from there, but the FontAwesome files were being served internally from the library, which broke the pathing. To solve this, I forked the library and added the Angular @fortawesome/angular-fontawesome package. Now, the icons load consistently with the rest of the assets, and this issue won’t reoccur.

Until my PR gets merged, I’ve uploaded it to my npm registry for anyone interested: npm i @mhaseebtariq/angular-editor. I’m also using it in production at my company. Once the PR is approved, you can switch back to the original package—credit, of course, goes to the original author. This is just a quick fix!

[Farzane2630]

I had the same issue and this worked for me:

add this object in angular.json file in assets: (as it is in the docs)

{
  "glob": "**/*",
  "input": "node_modules/@kolkov/angular-editor/assets/icons",
  "output": "assets/ae-icons/"
}

and add this style in styles.scss file:

angular-editor-toolbar button i {
  font-family: FontAwesome !important;
  color: black !important;
}

[mohaseebtariq]

::ng-deep got deprecated so if you are using later versions, that fix may not work

[Farzane2630]

@mohaseebtariq
Thank you for your comment.
I edited my answer.
Though the previous worked well with Angular18

[durgeshsamcomtechnobrains]

@Farzane2630 @mohaseebtariq can you please tell me how you implement in Angular 18

Please help me to solve this issue in Angular 18

• Angular 17
• it's working fine

I have make the changes according to you but it's not working for Angular 18

[mohaseebtariq]

@durgeshsamcomtechnobrains when you build the project do you see the font files in the build folder?

[durgeshsamcomtechnobrains]

@durgeshsamcomtechnobrains when you build the project do you see the font files in the build folder?
@mohaseebtariq
yes I have see the font files in the build folder

[durgeshsamcomtechnobrains]

@mohaseebtariq Thanks a lot,
and @Farzane2630 Thank you !
It's works for Angular 18

[AravindM-Contus]

@durgeshsamcomtechnobrains ,How do you fix that?
Could you provide me the solution to fix the issue?

[durgeshsamcomtechnobrains]

@AravindM-Contus you just need to change in 2 files
1.src/styles.scss
2. angular.json

[meetitexpert]

@AravindM-Contus you just need to change in 2 files 1.src/styles.scss 2. angular.json

Hi, I am facing an issue. This change works on localhost, but when I deploy the build, it does not work in production. Has anyone faced this issue?

I need help.

[prashan1]

@meetitexpert
https://www.npmjs.com/package/@kolkov/angular-editor#:~:text=Styling,themes/default.scss%22%0A%5D%2C
follow this, add these lines in your in stylist array of build, should work then.