0

I've recently started using Angular 4 and PrimeNG. I have been able to easily set up some components like a menubar with menuitems. The problem is that I want to use glyphicons and not font-awsome icons, that are with primeng by default for what I could understand, and if I define the icon property on my item object, like this: 

{
    label: this.lg.trans('print_selection'),
    icon: 'glyphicon glyphicon-print',
    command: this.printSelectedVisits
}

it renders the element with the classes fa fa-ws glyphicon glyphicon-print. This messes the icon up and it shows neither the glyphicon nor the fa icon, it shows some jibberish. I have been looking for hours but I failed to find some solution to take out the fa classes. I know that the fa classes are messing up because if I remove them from the element via dev tools, it shows the glyphicon.

If I remove the import for font-awsome icons from the angular-cli.json it shows the right icon but it doesn't remove the classes and this seems like an hack that could bring problems in the future.

Any idea on what I am doing wrong?

Any help would be most appreciated. Thanks

António Quadrado
  • 1,307
  • 2
  • 17
  • 34
  • I created a plunker with overridden icons - seems to work properly: https://plnkr.co/edit/JMmkafmNhTwndFLzG54A?p=preview. Please try to reproduce your issue on my plunker and I will try to help – Andriy Oct 01 '17 at 07:51
  • If you check your console you'll see that the icon span still has the `fa fa-ws` classes. It display the glyphicons properly because it hasn't the fa icons available so it will display the glyphicons... As I referred if I remove the FA import from my angular-cli.json it also displays the glyphicons but it seems like a hack and not a solutions... Any clue on what's wrong? – António Quadrado Oct 02 '17 at 08:31
  • my code does not remove existing classes. it just adds new ones. `fa` class just adds 'font-family' (among other rules) and `fa-fw`class sets fixed width to the icon by horizontal centering and assigning width. Those 2 classes do not add any `content` to the icon. So, when we bring `glyphicon` class, we override `font-family` and `glyphicon-print` adds `content` so it should work. – Andriy Oct 02 '17 at 10:01
  • Not in my case. I have those classes and if I remove them directly on the dev tools the icons are displayed correctly so I can only assume that those are causing the problem... I may be wrong but I if I am I cannot understand why all looks good when I remove them. – António Quadrado Oct 02 '17 at 10:05
  • if you do not care about AOT compilation, you can completely rewrite prime ng templates using `Reflect.getMetadata`, see how I did it for dropdown - https://stackoverflow.com/questions/43873162/prime-ng-dropdown-disable-certain-selectitems/45362622#45362622. Otherwise, since CSS classes are hardcoded by primeng, try to remove them using `Renderer2` or `ViewChild` ref or something alike – Andriy Oct 02 '17 at 11:08

0 Answers0