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
110
Certain icons are not available after upgrading to angular 16
posted

Hello Riva,
I am facing a similar issue. Some icons are not visible. For example the "cancel" and "clear" icons are not visible. In the below screenshot you will find that even though the igx-icon element is present the icon is not visible.


If I manually edit the icon label - "cancel" to "close" then I can see a relevant icon (below image).

I think the icons are not downloaded properly which is leading to this issue. Maybe I missed a step while upgrading to angular 16 from 13. Any suggestion is highly appreciated.

  • 560
    Offline posted

    Hello,

    After upgrading your project to the Ignite UI for Angular and Angular versions 16, you've encountered an behavior where certain icons are not available and not rendering correctly.

    Possible Causes and Solutions:

    1. Material Icons Font Not Loading Properly: Ensure that the Material Icons font is correctly linked in your index.html. The link you provided seems correct:

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


    However, there might be issues with loading external resources, especially if your application is running in an environment without internet access. In such cases, consider hosting the font files locally and referencing them appropriately.

    2. Confirm Module Imports:
    Check that the IgxIconModule is imported in your Angular module:

    import { IgxIconModule } from '@infragistics/igniteui-angular';

    @NgModule({

      imports: [

        // other imports

        IgxIconModule,

      ],

      // other configurations

    })

    export class AppModule {}


    This import is necessary for the igx-icon component to function properly.

    3. Icon Font Family Configuration: The igx-icon component uses the Material Icons font by default. If you've customized the icon font family elsewhere in your application, ensure that the igx-icon is set to use the correct font family. You can explicitly set the font set using the family input:

    <igx-icon family="material"></igx-icon>


    This ensures that the igx-icon component uses the Material Icons font.

    4. Consider Material Icons Extended:
    If you're using icons beyond the standard Material Icons set, you might need to include the Ignite UI Material Icons Extended. Install the package:

    npm install @igniteui/material-icons-extended

    5. Version Compatibility: Verify that the versions of @infragistics/igniteui-angular, @angular/material, and @angular/core are compatible with each other. Incompatibilities can lead to unexpected behavior. Consult the official documentation and update guides for each library to ensure compatibility.

    6. Inspect for CSS Conflicts:
    Examine your stylesheets for any CSS that might override the styles of the igx-icon component, potentially causing it not to display.

    7. Clear Caches:
    Clear your browser cache and ensure that your build artifacts are up to date by running:

    ng cache clean


    Then rebuild your project to ensure all changes are applied.

    Additional Checks:

    • Check Console for Errors: Open your browser's developer console to check for any errors or warnings related to font loading or icon rendering.
    • Review Network Requests: Use the network tab in developer tools to ensure that the font files are being loaded successfully without any 404 errors.

    Additional Resources:

    These resources discuss similar issues and might provide further insights into resolving the described behavior.

    By systematically checking these aspects, you should be able to identify and resolve the issue with icon rendering in your application.

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

    Regards,

    Georgi Anastasov

    Associate Software Developer

    Infragistics