Drawer Mini Font Awesome Icon issue

[Noah]

I am using an icon class in the drawer items to show fontawesome icons, but every time the drawer is expanded or collapsed, it duplicates the icon on both sides of the text.  This only happens when MINI mode is true

[Noah]

Ok, this only happens if you are trying to use one of their new "kits" from v6 or using their JS that inserts SVG.  It seems I am forced to use webfonts instead of SVG to get font awesome to work properly in drawer.

[Silviya]

Hello Noah,

I am not aware of the custom implementation in the Drawer component but it seems that the observed behavior might indeed be connected to the JS coming from the Font Awesome kit.

I saw that their team has created a specific Angular component for Angular projects:

https://fontawesome.com/docs/web/use-with/angular

Maybe giving their npm package a try could solve the issue.

As you noted, the Web Fonts work well with the Drawer (example with font-awesome/6.1.1).

I hope this information proves useful.

Regards,
Silviya
Progress Telerik