如何在 Angular 和 PrimeNG 中为 MenuItem 使用自定义图标？

Question

我正在使用 Angular 18 和 PrimeNG 18 的 RC 版本 (

"primeng": "^18.0.0-rc.1"

) 我正在尝试为 MenuBar 组件元素使用自定义图标，因为默认情况下，在 MenuItem 定义中使用

icon: 'pi pi-home'

使用 PrimeNG 图标。 我发现这个问题被问到并尝试实施这种方法。

问题是它似乎不起作用。这是我的代码：

app.ts：

menuItems: MenuItem[] | undefined = [
    {
      label: 'Tickets',
      icon: 'tickets-icon',
    }]

app.html：

<p-menubar [model]="menuItems">

应用程序.css：

:host ::ng-deep {
  .tickets-icon {
    width: 1rem;
    height: 1rem;
    background-image: url("/assets/menuIcons/tickets.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

我确保资产文件夹已正确添加到 angular.json 中：

"assets": [
              "src/favicon.ico",
              "src/assets"
            ],

文件的路径是正确的。我还测试了图标以确保 svg 有效。我错过了什么？

Answer 1

您使用的是

css

文件，而不是

scss

文件，因此无法识别嵌套样式，请将文件重命名为

app.component.scss

，它应该可以工作。

完整代码：

TS：

import { Component, OnInit } from '@angular/core';
import { ImportsModule } from './imports';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'menu-group-demo',
  templateUrl: './menu-group-demo.html',
  standalone: true,
  styles: [
    `
    :host ::ng-deep {
        .tickets-icon {
            width: 1rem;
            height: 1rem;
            background-image: url("/assets/menuIcons/home.svg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
  `,
  ],
  imports: [ImportsModule],
})
export class MenuGroupDemo implements OnInit {
  items: MenuItem[] | undefined;

  ngOnInit() {
    this.items = [
      {
        label: 'Tickets',
        icon: 'tickets-icon',
      },
    ];
  }
}

HTML：

<div class="card flex justify-content-center">
    <p-menu [model]="items" />
</div>

Stackblitz 演示