why does directly passing svg url is not working for mat-icon in Angular?

Question

This code works fine:

<mat-icon class="cost-list-icon"></mat-icon>

.cost-list-icon {
    content: url('/assets/icons/mdi_list-box-outline.svg');
}

But when I try to use it directly in html file it does not work. It is not working like this:

<mat-icon class="content: url('/assets/icons/mdi_list-box-outline.svg')"></mat-icon>

I would like to know how can I make it work directly in html file? If someone knows then please let me know. Thanks in advance

Answer 1

Instead of class, you have to use style. It can work as follows:

<mat-icon style="content: url('/assets/icons/mdi_list-box-outline.svg')"></mat-icon>