Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
385
TreeGrid - expand/collapse Chevron_right Icon isn't getting loaded and showing icon text
posted

Hi,

In our application in tree grid the expand/collapse Chevron right icon isn't loaded sometimes and showing the text in the place of the icon.

Is there any alternative way of loading if initial loading of the icon fails?

Thanks,

Manikanta Vundavalli

  • 2680
    Offline posted

    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