Not all icons are working

[AlexZd]

Hi I'm using lates beta of template.

I'm trying to add icon to TheSidebar menu. I'm adding menu item like following:

children.push({
   _name: "CSidebarNavItem",
  name: "Violation reports",
  to: { name: "reports" },
  icon: "cil-warning"
});

And it is working fine. But when I use another icon, like "cil-heart" or "cil-mobile", it stopping to work, so

children.push({
  _name: "CSidebarNavItem",
  name: "Devices",
  to: { name: "devices" },
  icon: "cil-mobile"
});

does not work. This issue happens everywhere, not only for sidebar menu.

[woothu]

You have to import icons you need in asets, or whole icons package if you don't mind bundle size.

[AlexZd]

Ok, for those who will have same issue: Go to src/assets/icons/icons.js file and add your icon name if it is not appearing.

[justlucdewit]

For the next poor soul that runs into this: make sure to restart the npm server after adding icons in src/assets/icons/icons.js

[rthijssen]

Any chance the template can just load all icons by default?

[agatha-soft]

For an Angular project, I had to dig in the source code to find a solution : For those Icons that don't show, do the following : Example of cil-money not showing Where you declare your route

import { cilMoney } from '@coreui/icons';
//
const routes : INavData[] = [
  //
  {
    name: 'foo',
    url: '/foo',
    iconComponent: { name: 'cil-money', content: cilMoney }
  }
  //
]

I don't know why some show and some need this extra step. (I did not import those that show anywhere in my code) But this approach seems to work