How to change icon for the existing toolbar buttons #2723
-
Hi everyone, I'm looking for a way to change icons for the existing buttons on the toolbar. So, I'm basically looking for a way to change svg for the component. I'm using 22.2.0-alpha.7 version Thanks in advanced |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Create a custom toolbar by copying the source code of the default toolbar into your project. Basically, it's all here: https://github.com/stephanrauh/ngx-extended-pdf-viewer/tree/main/projects/ngx-extended-pdf-viewer/src/lib/toolbar Granted, that's a lot of files, but most people only use a few buttons, and the source code is pretty simple. All you have to do is to modify the <pdf-shy-button
[cssClass]="show | responsiveCSSClass : 'always-in-secondary-menu'"
title="Infinite scroll"
primaryToolbarId="infiniteScroll"
[toggled]="pageViewMode == 'infinite-scroll'"
[action]="onClick"
l10nLabel="pdfjs-infinite-scroll-button-label"
[order]="3400"
[closeOnClick]="false"
image="<svg xmlns='http://www.w3.org/2000/svg' height= '24' viewBox= '0 -960 960 960' width='24' fill='currentColor'><path d= 'M212-260q-90 0-151-65.5T0-482q0-90 61.5-154T212-700q36 0 69.5 12t59.5 37l93 90-42 42-89-87q-18-18-41.5-26t-49.5-8q-64 0-108 46.5T60-482q0 66 43.5 114T212-320q25 0 48.5-8t42.5-25l316-298q26-25 59.5-37t68.5-12q90 0 151.5 64T960-482q0 91-61.5 156.5T747-260q-35 0-69-11.5T619-308l-91-90 42-42 87 87q17 17 41 25t49 8q65 0 109-48t44-114q0-65-44.5-111.5T747-640q-25 0-48.5 9T657-605L341-307q-26 24-60 35.5T212-260Z '/></svg>"
>
</pdf-shy-button> Instead of copying the entire source code, you can also use inheritance. That's frowned upon when it comes to Angular components, but maybe it makes sense in this particular case, because inheritance allows you to re-use the TypeScript code. In other words, when I change the TypeScript code in a future version, you automatically benefit from my change. The root component of the toolbar is here: https://github.com/stephanrauh/ngx-extended-pdf-viewer/tree/main/projects/ngx-extended-pdf-viewer/src/lib/toolbar/pdf-toolbar. And I've tried to document it here: https://pdfviewer.net/extended-pdf-viewer/customization. "tried to" means I'm still unhappy with my documentation - I think there's a lot of headroom for improvement! |
Beta Was this translation helpful? Give feedback.
Create a custom toolbar by copying the source code of the default toolbar into your project. Basically, it's all here: https://github.com/stephanrauh/ngx-extended-pdf-viewer/tree/main/projects/ngx-extended-pdf-viewer/src/lib/toolbar
Granted, that's a lot of files, but most people only use a few buttons, and the source code is pretty simple. All you have to do is to modify the
[image]
attribute. Most buttons resemble this example: