Can't Change Icon Color from a MenuItem-CodePudding

I having quite a trouble changing the colors of some icons inside a menu. They have two different colors, so i'm passing different classes to them... But (as always) it won't obbey...

My menuItemsSet function:

loadMenuItems(){
    this.menuItems = [
      { label: 'Whatsapp', icon: 'pi pi-whatsapp', iconClass: 'green-icon', command: () => this.openWhatsappHistory(this.selectedItem) },
      { label: 'E-mail', icon: 'pi pi-envelope', iconClass: 'red-icon'},
      { label: 'Excluir', icon: 'pi pi-trash', iconClass: 'red-icon', command: () => this.deleteBudget(this.selectedItem)},
      { label: 'Cancelar', icon: 'pi pi-times',iconClass: 'red-icon', command: () => this.cancelBudget(this.selectedItem)},
    ]
  }

My css:

.p-menu.p-menuitem-link.p-menuitem-icon.green-icon{
    color: rgb(21, 158, 21) !important;
}

.p-menu.p-menuitem-link.p-menuitem-icon.red-icon{
    color: rgb(242, 66, 66);
}

There's not much to see in html...:

<p-menu   appendTo="body" #menu [model]="menuItems" [popup]="true" [showTransitionOptions]="'150ms'" [hideTransitionOptions]="'150ms'"></p-menu>
<button (click)="menu.toggle($event); changeSelectedItem(order)" pButton type="button" icon="pi pi-ellipsis-v" ></button>

CodePudding user response：

First, If you want to override the default theme (in this case is text color of menuItem) you need to do it in style.css

style.css - with some modify

.green-icon a span:first-child {
  color: rgb(21, 158, 21);
}

.red-icon a span:first-child {
  color: rgb(242, 66, 66);
}

Second, PrimeNg menuItem doesn't have iconClass reference: PrimeNg Doc So you need to change to use styleClass and modify CSS to make it compatible with usage.

this.items = [
  {
    label: 'Options',
    items: [
      {
        label: 'Whatsapp',
        icon: 'pi pi-whatsapp',
        styleClass: 'green-icon',
        command: () => {},
      },
      {
        label: 'E-mail',
        icon: 'pi pi-envelope',
        styleClass: 'red-icon',
      },
      {
        label: 'Excluir',
        icon: 'pi pi-trash',
        styleClass: 'red-icon',
        command: () => {},
      },
      {
        label: 'Cancelar',
        icon: 'pi pi-times',
        styleClass: 'red-icon',
        command: () => {},
      },
    ],
  },
];

And this's the final look: Stackblitz

CodePudding user response：

I managed to succed by declaring the classes in styles.css (URGH...).

styles.css:

.p-menu .p-menuitem-link .p-menuitem-icon.red-menu-icon{
    color: rgb(242, 66, 66);
}
.p-menu .p-menuitem-link .p-menuitem-icon.green-menu-icon{
  color: rgb(21, 158, 21);
}

And for the menuItems list. As for primeNG > v14.1.1, the MenuItem class has the iconClass props, that you can pass the class of each icon you declare. I guess versions lower than that you would use the styleClass.

MenuItemList:

this.menuItems = [
      { label: 'Whatsapp', icon: 'pi pi-whatsapp', iconClass: 'green-menu-icon', command: () => this.openWhatsappHistory(this.selectedItem) },
      { label: 'E-mail', icon: 'pi pi-envelope', iconClass: 'red-menu-icon'},
      { label: 'Excluir', icon: 'pi pi-trash', iconClass: 'red-menu-icon', command: () => this.deleteBudget(this.selectedItem)},
      { label: 'Cancelar', icon: 'pi pi-times',iconClass: 'red-menu-icon', command: () => this.cancelBudget(this.selectedItem)},
    ]