How to add text into PrimeNG speeddial option buttons?

Question

I want to print a text instead of icons in the options of my sppeddial component.

I want this.

Thanks in advance

Answer 1

To achieve this, you can follow these steps:

1. Define your model list in the component's TypeScript file (component.ts):

this.items = [
  {
    icon: 'one',
    command: () => {
      this.messageService.add({
        severity: 'info',
        summary: 'Add',
        detail: 'Data Added',
      });
    },
  },
  {
    icon: 'two',
    command: () => {
      this.messageService.add({
        severity: 'success',
        summary: 'Update',
        detail: 'Data Updated',
      });
    },
  },
  {
    icon: 'pi pi-trash',
    command: () => {
      this.messageService.add({
        severity: 'error',
        summary: 'Delete',
        detail: 'Data Deleted',
      });
    },
  },
  {
    icon: 'pi pi-upload',
  },
  {
    icon: 'pi pi-external-link',
    url: 'http://angular.io',
  },
];

Feel free to change the icon property to any name you desire, as it will create a span element with a class corresponding to the icon name under the hood. This class will be used as a selector to specify your item.

2. Use the p-speedDial component in your component's HTML file (component.html):

<p-speedDial [model]="items" direction="up"></p-speedDial>

3. In the component's SCSS file (component.scss), select the spans and change their content:

:host ::ng-deep .p-speeddial-action-icon.one::before {
  content: '1' !important;
}

:host ::ng-deep .p-speeddial-action-icon.two::before {
  content: '2' !important;
}

These styles will change the icon content of the first two buttons to '1' and '2' respectively.

it's a workaround but it works