Reply To: Display icons inside the grid component

[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/