Telerik Reporting Displaying Reports Web Application Native Angular Report Viewer Customizing Toolbar Icons

New to Telerik Reporting? Start a free 30-day trial

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.

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:

HTML
<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>
TS
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;
    }
}

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

Toolbar Icons Overview

Setting a new Kendo SVG Icon on the toolbar

Toolbar Icons List

See Also