# Features
The following features are available as part of Font Awesome. Note that the syntax is different from our general web-use documentation.
## Basic
### Size
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons)
```html
```
### Fixed Width
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons):
```html
```
### Rotate
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons):
```html
```
### Flip
* horizontally, vertically, or both
```html
```
### Animations
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons)
```html
```
### Border
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons):
```html
```
### Pull
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons):
```html
```
### Custom styles
Simple styles can be applied using usual [class and style bindings](https://angular.io/guide/class-binding):
```css
.red-icon {
color: red;
}
```
```html
```
For more advanced styling, see [Styling icon internals](../guide/styling-icon-internals.md).
## Duotone icons
### Basic use
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#basic-use):
```html
```
### Swap layers opacity
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#swapping-layers):
```html
```
### Customize layers opacity
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#changing-opacity):
```html
```
### Customize layers color
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#coloring):
```html
```
## Advanced Usage
### Mask
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/masking)
```html
```
### Transform
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)
```html
```
### Stateful Animations
```html
```
### Transform within binding:
```html
```
(Slide input range to "turn up the magic")
### Stacked icons
Each `` declared inside an `` element **must** include the `stackItemSize` input parameter, otherwise the icon will not render.
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons):
```html
```
When using standalone components, make sure to also add `FaStackItemSizeDirective` to the imports alongside with the `FaStackComponent`. Without the directive, the stacked icon will not render correctly.
### Layers
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/layering):
```html
```
### Layers with text
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/layering):
```html
```
### Layers with counter
[FontAwesome Spec](https://fontawesome.com/how-to-use/on-the-web/styling/layering):
```html
```
### Programmatic API
#### v2.0.0 Onwards
To create `FaIconComponent` dynamically:
```ts
@Component({
selector: 'fa-host',
template: `
`
})
class HostComponent {
readonly container = viewChild('host', { read: ViewContainerRef });
createIcon() {
const componentRef = this.countainer().createComponent(FaIconComponent);
componentRef.setInput('icon', faUser);
}
}
```
To update `FaIconComponent` programmatically:
```ts
@Component({
selector: 'fa-host',
template: '',
})
class HostComponent {
readonly faUser = faUser;
readonly iconComponent = viewChild(FaIconComponent);
spinIcon() {
this.iconComponent().animation.set('spin');
}
}
```
#### Upto v1.0.0
To create `FaIconComponent` dynamically:
```ts
@Component({
selector: 'fa-host',
template: '
'
})
class HostComponent {
@ViewChild('host', {static: true, read: ViewContainerRef}) container: ViewContainerRef;
createIcon() {
const componentRef = this.container.createComponent(FaIconComponent);
componentRef.instance.icon = faUser;
// Note that FaIconComponent.render() should be called to update the
// rendered SVG after setting/updating component inputs.
componentRef.instance.render();
}
}
```
To update `FaIconComponent` programmatically:
```ts
@Component({
selector: 'fa-host',
template: ''
})
class HostComponent {
faUser = faUser;
@ViewChild(FaIconComponent, {static: true}) iconComponent: FaIconComponent;
spinIcon() {
this.iconComponent.animation = 'spin';
// Note that FaIconComponent.render() should be called to update the
// rendered SVG after setting/updating component inputs.
this.iconComponent.render();
}
}
```