New to Telerik Reporting? Download free 30-day trial

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:

        report: 'Report Catalog.trdx',
        parameters: {}
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'

        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;

            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

See Also

In this article