Toolbar Icons Overview
The Native Angular Report Viewer uses Kendo SVG Icons for the icons displayed in its toolbar. The default toolbar icons can be changed with any SVG icon from the Kendo SVG Icons List.
Setting a new Kendo SVG Icon on the toolbar
In the component with the report viewer, import the @progress/kendo-svg-icons package(it is automatically installed with the report viewer as peer dependency).
In the below example, we will demonstrate how to change the 'Stop Rendering' button's default icon:
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Report Catalog.trdx',
parameters: {}
}"
serviceUrl="https://demos.telerik.com/reporting/api/reports"
viewMode="interactive"
[keepClientAlive]="true">
</reporting-angular-viewer>
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { ReportSourceOptions } from '@progress/telerik-common-report-viewer'
import { xOutlineIcon } from '@progress/kendo-svg-icons'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
ngAfterViewInit(){
this.viewer.xCircleIcon = xOutlineIcon;
}
}
Toolbar Icons List
| Icon | Property | Purpose |
|---|---|---|
| undoIcon | Navigate Backward | |
| redoIcon | Navigate Forward | |
| xCircleIcon | Stops Report Rendering | |
| arrowRotateCwIcon | Refreshes the Report Viewer | |
| rewindIcon | Returns the Report to the first page | |
| caretAltToLeftIcon | Goes to the previous page | |
| caretAltToRightIcon | Goes to the next page | |
| forwardIcon | Navigates to the last page of the report | |
| fileTxtIcon | Sets interactive viewmode |
|
| alignLeftIcon | Sets printPreview viewmode |
|
| printIcon | Opens the browser's Print Dialog | |
| downloadIcon | Opens the Export Dropdown | |
| zoomOutIcon | Zooms in the Report | |
| zoomInIcon | Zooms out the Report | |
| searchIcon | Open the Search Dialog | |
| positionLeftIcon | Show/hide the Document Map | |
| positionRightIcon | Show/hide the Parameters Area |