Basic setup doesn't display icons

[CarlosTorrecillas]

Following the EXAMPLES here https://github.com/stevermeister/ngx-wig, no icons appear on the format options in the text editor

Also, the example "Set buttons": <ngx-wig [content]="text1" [buttons]="formats, bold, italic"></ngx-wig> seem to throw an error Parser Error: Unexpected token ',' at column 8 in [formats, bold, italic] i...

[stevermeister]

no icons appear

you can style them as you want. by default they are using material design icons.

Also, the example "Set buttons"

this one is strange we will look into it

[CarlosTorrecillas]

Thanks for that. I’ve been looking at PRs and the code to see how to pass the icons theme but couldn’t find anywhere where you define the icon theme. Would you mind giving an example of how to use for example Font awesome for them? I would really appreciate it

[CarlosTorrecillas]

Found the issue. I think in the example it is missing the single quotes within the double quotes and that way it works. The formats option does not exist though. Available: list1,list2,bold,italic,link last but not least there is one extra icon right at the end which I don't know what it does. Could you explain that? Would it be possible to hide it via configuration?

Thanks,
Carlos.

[stevermeister]

I'll create example for you

and you are more than welcome to make PR with all suggested changes! :)

is one extra icon right at the end

you mean "source"? - to output HTML source

[stevermeister]

here you are
https://stackblitz.com/edit/angular-kybmfp?file=styles.css

[stevermeister]

@CarlosTorrecillas thank you for you feedback and research I've updated readme with examples and also fixed the bug with custom buttons

[CarlosTorrecillas]

It's weird because I want to use the basic example with the [content] being a two-way binding field and it doesn't work. I only get it work if I have the contentChange and assign it on that method. Unfortunately I can't get it to work either with pre-existing content. So for example if I add new content using the editor and I load the screen with that content, it wouldn't show up in the screen.

[ilDon]

I was having the same issue for the icons. Icons were not showing after completing all installation steps, so I've added @import "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css"; to my style.css file.

I was confused by the fact that I was importing this: @import "https://fonts.googleapis.com/icon?family=Material+Icons";, since I'm using Angular Material 2.

So perhaps it would be worth adding to the Readme that the material icons imported with Angular Material 2 won't work out of the box.

[stevermeister]

yes, we updated all the examples
here the one with two-way binding

• https://stackblitz.com/edit/ngx-wig-2-way-binding-choit3?file=app%2Fapp.component.html

you should use ngModel here.

It was an outdated example in docs.
Thank you one more time for your feedback!

[kover]

It's weird I have material-design-icons installed and configured and can use that icons in Angular Material directives, but the editor show squares instead of icons.

Update:
It is looks like because I use Google's Material Design Icons.

[stevermeister]

thank you all for your feedback, I've added some documentation

[phil123456]

why are these icons not part of the dist ?
what if that cdn goes away, then no more icons ???

and this does not work :

@import "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css";

[stevermeister]

you can use any icons, and you are also welcome to make PR