Open SUlbrichA opened 6 years ago
Agree, schould be added!
Isn't adding icons just a matter of adding the CSS library to package.json?
Hi @SUlbrichA. Could you please clarify what do you mean by support? Oleersoy's answer is correct, you can install and use any icon pack. Thanks, @oleersoy!
hi again, sorry haven't worked on that for a while. I just want to use a random svg or png as an icon. Actually, it seem that #1592 addresses the same issue. I tried adding the following to pages.component.scss
.myico {
background: url('/assets/images/icon.svg') 50% 50%;
}
Without luck
Edit: when I add it to src/app/@theme/styles/styles.scss
it works:
.myico {
background: url('/assets/images/icon.svg';
height: 50px;
width: 50px;
}
Why does do I have to add it globally to the style and not to the component's (sorry if that's a stupid question)?
Hi
any progress on this? I can't use my custom SVG files in the pages-menu.ts, which is painful because the default iconpacks does not have even a similar icon I could use. The CSS solution written above is not working. Even if I register my images the following way:
import { NbIconLibraries } from '@nebular/theme';
constructor(private iconLibraries: NbIconLibraries) {
this.iconsLibrary.registerSvgPack('social-networks', {
'facebook': '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> ... </svg>',
'twitter': '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> ... </svg>',
// ...
});
}
the icon is still not displayed. A possible solution would be to replace the nb-menu with my own version, but I wouldn't like to spend time with it, if there is another way.
@henpanta just make sure that you add the pack in the MENU_ITEMS like this { title: 'E-commerce', icon: { icon: 'facebook', pack: 'social-networks' }, link: '/pages/dashboard', home: true, },
then the registerSVG should work properly
Hi @rabiee3,
I have tried your code above, but it's not working. Because the icon is declared as a string in NbMenuItem. Therefore, an object as your description can not work.
Does anyone know how to resolve this issue?
@TanTrinh First of all, I am not telling you the solution hypothetically because i already have a (Angular8 - Nebular4) project running in which i have 3 icon packs: a custom one from my own making, ionicons and font awesome and they are all working together perfectly.
Secondly, please take a closer look at the "NbMenuItem" class.
You'll find that icon is not declared as a string only, it is declared as
icon?: string | NbIconConfig;
and if you take a look at the NbIconConfig you'll find its declaration as following: `export interface NbIconConfig { icon: string; pack?: string; status?: NbComponentStatus; options?: {
};
}`
So the problem is either in your code or in the nebular version that you have. Please try my solution again.
Hi @rabiee3,
Thanks for your reply, you are correct. The problem is from my nebular/theme version. I've updated it and the code above work as expected.
it is very easy to register and use your own custom icon in sidebar menu by following simple steps
Step 1 (for registring the custom icon pack for your moduel )
go to this path "src\app\pages\pages.module.ts"
Step 2
Mention this code
export class PagesModule { constructor(iconsLibrary: NbIconLibraries) { iconsLibrary.registerFontPack('fa', { packClass: 'fa', iconClassPrefix: 'fa' }); iconsLibrary.registerFontPack('far', { packClass: 'far', iconClassPrefix: 'fa' }); // iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' }); iconsLibrary.registerSvgPack('social-networks', { 'python': '<img src="../../assets/python.png" width="25px">', }); } }
Step 3
go to this path "src\app\pages\pages.menu.ts"
add your menu with icon like this
{ title: 'Dashboard', icon: { icon: 'facebook', pack: 'social-networks'}, link: '/pages/dashboard', home: true, },
see the result here
How to show an icon in the nb-menu? I see the options to add the facility to use font icons only.
@henpanta just make sure that you add the pack in the MENU_ITEMS like this { title: 'E-commerce', icon: { icon: 'facebook', pack: 'social-networks' }, link: '/pages/dashboard', home: true, },
then the registerSVG should work properly
@pankajtechtrail
@henpanta just make sure that you add the pack in the MENU_ITEMS like this { title: 'E-commerce', icon: { icon: 'facebook', pack: 'social-networks' }, link: '/pages/dashboard', home: true, }, then the registerSVG should work properly
@pankajtechtrail
I want to show image icons rather than font icons in the menu.
@pankajtechtrail
you can't show images, but you can convert your image to svg using illustrator for an example, then registerSVGpack in your theme and then use normally like the font-icon
can anyone help why below config for "ionic icon" is not working?
title: 'E-commerce1',
icon: {
icon: 'desktop-outline',
pack: 'ion'
},
registerFontPack('ion', { iconClassPrefix: 'ion' });
for ion, its not reflecting icons like "desktop-outline".
Issue type
I'm submitting a ... (check one with "x")
Issue description
Currently, it seems only nebular, font awesome and ionic icons are supported. It would be useful to have a method to add additional custom icons (especially to the sidenav bar)