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.