How can I add a custom icon to a menu item ?

UI Components for Angular
Post Reply
bikytwo
Posts: 7
Joined: 31 May 2017, 23:35

07 Jun 2017, 13:51

Hi,

I want to add a custom icon with a url path to a menu item, like this:

Code: Select all

    
 this.items = [{
    label: 'Custom item',
    icon: 'custom-icon'
 }
    
.custom-icon {
  background-image: 'https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/checkmark-24-24.png';
}
     
This is what is rendered:

Code: Select all

<span class="ui-menuitem-icon fa fa-fw custom-icon" ng-reflect-klass="ui-menuitem-icon fa fa-fw" ng-reflect-ng-class="custom-icon"></span>
But it does not display the custom icon.

How to add a custom icon to a menu item?

Thanks.

bikytwo
Posts: 7
Joined: 31 May 2017, 23:35

08 Jun 2017, 02:01

Ups... my fault , I was forgetting url from background-image property:

.custom-icon {
background-image: url('https://cdn2.iconfinder.com/data/icons/ ... -24-24.png');
}

So, problem solved.

Thanks.

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4344
Joined: 16 Oct 2011, 19:19
Location: Singapore

08 Jun 2017, 18:14

Cool.But I can see font-awesome fa fa-fw in the generated response due to its specific usage on FA.
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

buseodaci
Posts: 1
Joined: 28 Jan 2018, 15:01

13 Sep 2019, 15:20

When i use with label its not work :?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests