Get Free Trial
Get Free Trial

Add new icon in toolbar

swapnil sonkusare asked on September 5, 2019

Hi,
I am using pivot table in angular 6; so I want to add new icon which doesn’t have in default icon set.

Attachments:
Screenshot (152).png

4 answers

Public
Vera Didenko Flexmonster September 5, 2019

Hello,
 
Thank you for your question.
 
You can add new icons to new Tabs via the icon property. 
Please see our customizing the Toolbar guide for reference: https://www.flexmonster.com/doc/customizing-toolbar/.
 
Here is a JSFiddle example for illustration: https://jsfiddle.net/flexmonster/aL1j9hqo/.
 
The Toolbar is customized using the beforetoolbarcreated event. Please note that in Angular, events are specified in round brackets instead of square brackets.
 
Please see how events should be defined in app.component.html from our sample project: https://github.com/flexmonster/pivot-angular/blob/master/src/app/app.component.html.
Also please check how the event handlers are specified in app.component.ts: https://github.com/flexmonster/pivot-angular/blob/master/src/app/app.component.ts.
 
The same approach can be used for the beforetoolbarcreated event.
 
You are welcome to contact us in case of questions.
 
Best Regards, 
Vera

Public
swapnil sonkusare September 5, 2019

I have already use this approach but there no svg.
so should we create some svg for implementing that because we don’t want url specific img or gif.

Public
Vera Didenko Flexmonster September 6, 2019

Hello, 
 
Thank you for your reply.
 
The icon Tab property is defined in our documentation the following way:
icon – String. The HTML tag containing your custom icon for this new tab. You can choose one of the basic vector icons defined in the flexmonster.toolbar.js file.
 
You can use Flexmonster’s set of SVG icons defined in the flexmonster.toolbar.js file or use your custom SVG icons.
 
Please let us know if you have any questions.
 
Best Regards,
Vera

Public
swapnil sonkusare September 9, 2019

Thanks
It worked I used custom svg string. 

Please login or Register to Submit Answer