Using Angular #

Integrating Houston Icons into your Angular project is straightforward. This page will guide you through the process of using Houston Icons Angular components in your application.

Import an Module #

Once installed, in your .component.ts you will be able to import HoustonIconsModule, and individual icons from the @houstonicons/angular package:

import { HoustonIconsModule } from '@houstonicons/angular'
@NgModule {(
imports: [...,HoustonIconsModule],
)}

Rendering an Icon #

To render an icon, simply use it as a Angular component:

<div><houston-home-01-icon 
[size]="48" 
[variant]="'solid'" 
[type]="'rounded'" 
[color]="'#FFFFFF'" 
/></div>

In the example above, the Home01Icon component is included in a function component with a custom size and color.

Customizing Icons #

You can customize icons further by using the variant and type properties:

<houston-home-01-icon [size]="48" [variant]="'solid'" [type]="'rounded'" [color]="'#FFFFFF'" />

By following these steps, you can effectively utilize Houston Icons in your Angular application, enhancing your project's design with beautiful icons.

This guide covers the basics of using the Houston Icons package with Angular: installation, importing, rendering, and customizing icons. Adjust the code examples to fit the exact syntax and usage patterns of the @houstonicons/angular package.