# Toolbar and Panel Icons

Learn the major key features of the toolbar and side panel for the Document Solutions PDF Viewer along with their toolbar icons and description.

## Content

DsPdfViewer features can be accessed by either using the toolbar options in the toolbar displayed at the top or the feature specific panels available in the side bar.
The key features of toolbar and side panel for Document Solutions PDF Viewer are listed below.

| **Features** | **Toolbar Icons** | **Description** |
| -------- | :-----------: | ----------- |
| Open PDF file | ![Open PDF file icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/2019-05-08_15-08-07.png) | Enables you to open a PDF file in the Viewer. |
| Easy page navigation with Pan tool | ![Pan tool icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/pantool_viewer_v3.png) | Allows you to view the page by dragging it up or down. |
| Zoom in and zoom out PDF document | ![Zoom in/out icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/zoomingicon_viewer_v3.png) | Enables you to zoom in and zoom out the PDF pages, and set the zoom percentage. |
| Switch to Full screen | ![Full screen icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/2019-05-08_15-07-26.png) | Enables you to toggle to full-screen mode and access the mini-toolbar from the bottom of the Viewer window.<br>**Note:** The button is hidden by default, however, can be enabled through code. See [Migration Guide](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/migration-guide) for more info. |
| Print PDF document | ![Print icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/2019-05-08_15-09-16.png) | Allows you to print PDF files in the Viewer. |
| Page Display | ![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/page-display-icon-shaded.png) | Enables you to set the page display layout of the PDF documents. |
| Rotate PDF document | ![Rotate icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/2019-05-08_15-09-29.png) | Allows you to rotate pages in a PDF file. |
| Built-in Viewer themes | ![Themes icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/2019-05-08_15-10-02.png) | Enables you to choose from different themes in the Viewer.<br>**Note:** The button is hidden by default, however, can be enabled through code. See [Migration Guide](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/migration-guide) for more info. |
| Download PDF document | ![Download icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/2019-05-08_15-08-33.png) | Enables you to download the PDF file you want to view in the Viewer. |
| Navigate to first and last pages | ![Navigation icon for first page](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/gotofirst_viewer_v3.png) ![Navigation icon for last page](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/gotolast_viewer_v3.png) | Enables you to navigate instantly to the first and last pages with page navigation icons in the Toolbar.<br>**Note:** The buttons are hidden by default, however, can be enabled through code using **showFirstButton** and **showLastButton** options. See [Migration Guide](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/migration-guide) for more info. |
| View the current page number | ![View icon for current page number](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/currentpagenumbr_viewer_v3.png) | Allows you to display and set the number of the current page being previewed in the Viewer.<br>**Note:** The page counter appearance is customizable. See [Customize Page Counter Appearance](https://developer.mescius.com/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/view-pdf/viewerfeatures/pdfviewerfeatures#customize-page-counter-appearance) below. |
| Navigate between preceding/succeeding pages | ![Navigation icon for preceeding pages](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/gotoprevious_viewer_v3.png) ![Navigation icon for succeeding pages](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/gotonext_viewer_v3.png) | Enables you to navigate through all the pages with page navigation icons in the Toolbar. |
| Select text | ![Select text icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/arrow1.png) | Allows you to select text or rows of text in the PDF Viewer. |
| Hide Annotations | ![Hide annotations icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/hideannotation_icon_viewer.png) | Allows you to hide annotations in a PDF document. |
| Search Bar | ![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/floating-search-bar-icon.png) | Allows you to search for text with some advanced options. |
| Document Properties | ![Document properties icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/docproperties_icon_pdfviewer.png) | Allows you to view document properties like File Name, File Size, Title etc. |
| About | ![About icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/about_icon_viewer.png) | Allows you to view the version number of PDF Viewer. |

| **Features** | **Panel Icons** | **Description** |
| -------- | :---------: | ----------- |
| Thumbnail navigation | ![Thumbnail navigation icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/2019-05-08_15-04-05.png) | Allows you to see the preview of all available pages in the PDF document. |
| Search | ![Advanced search option icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/search.png) | Allows you to search for text with match-case and whole-word search options. <br>**Note:** You can use the search option as a floating search bar or it can be added to the sidebar. For more information, see [Search](/document-solutions/dot-net-pdf-api/docs/online/pdfviewer/view-pdf/viewerfeatures/advanced-search-options). |
| Page-level and document-level attachments | ![Page-level and document-level attachments icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/attachment.png) | Allows you to view the attachments in the left pane and open the attachments by double-clicking the attachment files. |
| Article thread navigation | ![Article thread navigation icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/thread.png) | Enables you to navigate with article threads in a PDF document through a separate panel. |
| Bookmark navigation | ![Bookmark navigation icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/icon1.png) | Enables you to list the outlines/bookmarks and navigate to different positions in the document. |
| View sidebar options | ![View sidebar options icon](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/2019-05-08_15-02-27.png) | Allows you to view sidebar options with complete names of the options. |

To see demo of DsPdfViewer, visit the [DsPdf Sample browser](https://developer.mescius.com/documents-api-pdf/demos/). Here, you can see all the PDF features that are supported and running in the viewer.

### Customize Page Counter Appearance

The Page counter appearance can be customized using **pageCounterFormat** property. The empty state text can also be configured using **emptyPageCounterFormat** property. See example code below, to customize these two properties:

```auto
const viewer = new DsPdfViewer('#viewer', {  
  navigation: {  
    // Format for the page counter when a document is loaded
    pageCounterFormat: 'Page {{current}} of {{total}}',
    // Format to display when no document is loaded
    emptyPageCounterFormat: 'Empty'
  }  
}); 
```

![](https://cdn.mescius.io/document-site-files/images/b3d1b839-d589-484d-911e-bdee556db99b/page-counter-format.283a0c.png) ![](https://cdn.mescius.io/document-site-files/images/b3d1b839-d589-484d-911e-bdee556db99b/empty-page-text.019340.png)