JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Display icons inside the grid component
- This topic has 2 replies, 2 voices, and was last updated 1 year, 1 month ago by svetoslav_borislavov.
-
AuthorPosts
-
August 17, 2023 at 8:41 pm #108562Matias GalanteParticipant
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?
Thanks
- This topic was modified 1 year, 1 month ago by Matias Galante.
- This topic was modified 1 year, 1 month ago by Matias Galante.
- This topic was modified 1 year, 1 month ago by Matias Galante.
- This topic was modified 1 year, 1 month ago by Matias Galante.
- This topic was modified 1 year, 1 month ago by Matias Galante.
August 17, 2023 at 8:53 pm #108568Matias GalanteParticipantI 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 1 year, 1 month ago by Matias Galante.
August 18, 2023 at 6:18 am #108572svetoslav_borislavovParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.