Need to display an icon of ms-excel instead of text

Hi Team,

I am using Infragistics version 9.1.12 and Angular version 9.

Scenario: I have a igx data grid and a feature button below the grid to export the grid data to excel

Requirement: Need to display ms-excel icon of green color and transparent button background color instead of text stating “Export to excel”.

Tried the below code snippet but was not able to display the icon:

<button igxButton=”raised” (click)=”exportButtonHandler()” class=”exportButton” igxButtonBackground=”transparent”>

<igx-icon fontSet=”material”>ms-excel</igx-icon>

</button>

Hope to get solution soon!!

Thanks in advance!

Hi Shobhana Suara,

Thank you for posting your inquiry to our forum.

We are investigating your issue. As it takes some more time until we can give you an update, could you wait for a while?

Thank you in advance.

Is there any progress yet w.r.t. my query. Please respond.

Excellent support on your end Shobhana Suara! Good job! Keep up the good work!

Hi Shobhana Suara,

Thank you for posting our forum.

The following steps to display MS-Excel icon.

1) Installation

npm install @igniteui/material-icons-extended

2) Register a single icon in our component (*.ts)
——————————————————————–
import { msExcel } from "@igniteui/material-icons-extended";

constructor(private iconService: IgxIconService) {}

ngOnInit() {
    this.iconService.addSvgIconFromText(msExcel.name, msExcel.value, "imx-icons");
}
——————————————————————–

3) Use the icons in your component template (*.html)
——————————————————————–
<igx-icon fontSet="imx-icons" name="msExcel"></igx-icon>
——————————————————————–

Material Icons Extended
https://es.infragistics.com/products/ignite-ui-angular/angular/components/material-icons-extended

I attached an sample, I hope this helps you.

SampleIcon.zip