Hi Manikanta,

Thank you for reaching out!

There has recently been discussed a similar issue here, however, it affects users based in China, as there exists a national policy about accessing GoogleAPI resources. Since you mention that the icons are not loaded sometimes, this might indicate that this behavior is more of a connectivity issue. Still, it might help to check the referenced thread as well.

So, the Material Icons font is linked in the index.html file in all of our documentation demos:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

I am wondering if this is the approach to accessing the Material Icons font in your app as well?
An alternative way would be to add the material-design-icons package as a dependency and use the stylesheet:

npm install material-design-icons
@use 'material-design-icons/iconfont/material-icons.css';

Here you can find a small sample demonstrating the latter.

What I can also suggest is reviewing the Google Fonts guidelines on setting up the Material fonts here and considering the different methods that are described, such as self hosting or using individual icon images.

Finally, the IgxRowExpandedIndicatorDirective and IgxRowCollapsedIndicatorDirective could be used to template the expand/collapse icons with custom ones:

 

       <ng-template igxRowExpandedIndicator>
            <igx-icon role="button">expand_more</igx-icon>
        </ng-template>

        <ng-template igxRowCollapsedIndicator>
            <igx-icon role="button">chevron_right</igx-icon>
        </ng-template>

If you require any further assistance on the matter, please let me know.

Best regards,
Bozhidara Pachilova
Associate Software Developer