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 |
|---|---|---|
| alignLeftIcon | Sets printPreview viewmode |
|
| arrowRotateCwIcon | Refreshes the Report Viewer | |
| caretAltToLeftIcon | Goes to the previous page | |
| caretAltToRightIcon | Goes to the next page | |
| downloadIcon | Opens the Export Dropdown | |
| fileTxtIcon | Sets interactive viewmode |
|
| forwardIcon | Navigates to the last page of the report | |
| positionLeftIcon | Show/hide the Document Map | |
| positionRightIcon | Show/hide the Parameters Area | |
| printIcon | Opens the browser's Print Dialog | |
| redoIcon | Navigate Forward | |
| rewindIcon | Returns the Report to the first page | |
| searchIcon | Open the Search Dialog | |
| undoIcon | Navigate Backward | |
| xCircleIcon | Stops Report Rendering | |
| zoomInIcon | Zooms out the Report | |
| zoomOutIcon | Zooms in the Report |