Display icons inside the grid component

[Matias Galante]

Hello,

my question is similar to what has been posted here: https://www.htmlelements.com/forums/topic/change-cell-value-based-on-other-cell-value/

except that I’m using Angular. In this stackblitz example here: https://stackblitz.com/edit/github-wnyy8e?file=src%2Fapp%2Fapp.component.ts,src%2Findex.html,src%2Fapp%2Fapp.component.html,src%2Fassets%2Fdata.ts

If you look app.component.ts, on line 67, I’m using a function to change the icon dynamically.

{
  label: 'First Name',
  dataField: 'firstName',
  template: function (formatObject) {
    const data = formatObject.row.data;
    if (data.firstName.toLowerCase() === 'ok') {
      formatObject.template = '<mat-icon>done</mat-icon>';
    } else {
      formatObject.template = '<mat-icon>priority-high</mat-icon>';
    }
  },
},

In this example, first names are used but in mine it will be a status. If the status is ‘ok’ I want to display the checkmark icon using the mat-icon tag. Otherwise, display an exclamation point. The problem is, the text ‘priority-high’ appears in the UI but not the icon. Are mat-icons not supported this way? If not, what alternative can I use to make a checkmark icon appear in the grid?

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:done:FILL@0;wght@400;GRAD@0;opsz@48&icon.query=done

Thanks

• This topic was modified 8 months, 2 weeks ago by Matias Galante.
• This topic was modified 8 months, 2 weeks ago by Matias Galante.
• This topic was modified 8 months, 2 weeks ago by Matias Galante.
• This topic was modified 8 months, 2 weeks ago by Matias Galante.
• This topic was modified 8 months, 2 weeks ago by Matias Galante.

[Matias Galante]

I also tried the i tag with font awesome

<i class="fa-solid fa-check"></i>

but that doesn’t work either since the UI cell is blank. Although maybe I need to import something to use font-awesome but I prefer mat-icon

• This reply was modified 8 months, 2 weeks ago by Matias Galante.

[svetoslav_borislavov]

Hi,

Here you are: https://stackblitz.com/edit/github-wnyy8e-iqzu1z?file=src%2Fapp%2Fapp.component.ts
To use material icons, you should import them as shown in the link that you have sent.
In index.html, you should add the following import tag:
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200″ />

Also, a style has to be added. I have added it in assets/styles.css:
.material-symbols-outlined {
font-variation-settings: ‘FILL’ 0, ‘wght’ 400, ‘GRAD’ 0, ‘opsz’ 48;
}

The last part is that the icons are not used as custom tags, but the following way: <span class=”material-symbols-outlined”>done</span>

Please see the demo to get familiar with.

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts