Troubleshooting: Common Issues #

When integrating and using Houston Icons in your projects, you might encounter some common issues. This guide aims to address these problems, providing solutions to ensure a smooth experience with Houston Icons.

Icons Not Rendering #

Symptoms:

• Icons do not appear in your application.
• Icons are replaced by a blank space or broken image icon.

Symptoms:

1. Check the imports: Ensure that the icon components are correctly imported from the @houstonicons/react, @houstonicons/vue, @houstonicons/angular or any other frameworks package.

   import { Home01Icon } from '@houstonicons/react'
2. Verify Icon Names: Make sure the icon names in the import statement match the exact names provided by Houston Icons. Pay attention to spelling and case sensitivity.
3. Check for Typos in Properties: Incorrectly spelled or unsupported properties can prevent icons from rendering correctly.

Icons Displaying Incorrectly #

Symptoms:

• Icons appear distorted, the wrong color, or the wrong size.

Symptoms:

1. Review Icon Properties: Double-check the size, color, and other properties passed to the icon component. Incorrect values could cause the icon to display improperly.
2. Use Supported Properties: Ensure you're using properties supported by the specific icon variant. For example, the type property might not be applicable to all variants.

Performance Issues #

Symptoms:

• Slow loading times or lag when icons are used extensively.

Symptoms:

1. Optimize Icon Usage: Import only the icons you need instead of importing the entire icon library. This reduces bundle size and improves performance.
2. Lazy Load Icons: If your application uses a large number of icons, consider lazy loading icons that are not immediately visible to the user.