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.
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:
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