search

NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.83k stars 3.89k forks source link

feat request: ability to add icons in auto generated breadcrumb #5029

Open ccppprogrammer opened 4 years ago

ccppprogrammer commented 4 years ago

What problem does this feature solve?

Ability to add icons or even any HTML tags in auto generated breadcrumb. Currently nz-breadcrumb displays any HTML tags as text.

Demo: https://ng-zorro-breadcrumb-auto-with-icon.stackblitz.io

What does the proposed API look like?

Check stackblitz link: https://ng-zorro-breadcrumb-auto-with-icon.stackblitz.io

wzhudev commented 4 years ago

This is a brilliant idea! The only problem is how to design the API for it. Any idea?

ccppprogrammer commented 4 years ago

I think the main problem with rendering is related to DomSaniteizer. For example, we may have an additional option, like bypassSecurityTrustHtml, and if it set to true, then any HTML tags in nzRouteLabel will be displayed as HTML.

flier268 commented 1 week ago

For example

{
  path: 'SalesReport',
  data: {
    breadcrumb: {
      label: '銷貨統計表',
      info: {icon: 'pi-file-export'},
    },
  },
  loadComponent: () => import('./sales-report/sales-report.component').then(m => m.SalesReportComponent),
}