Icon

Angular Bootstrap Icon is an element which is used for dismissing components like modals and alerts. See how easy implementation is.

Examples

Default Icon example.

html

<CDBBtn color="primary">
    <CDBIcon [fab]=true icon="stack-overflow"></CDBIcon>
    click me
</CDBBtn>
<CDBBtn color="secondary">
    <CDBIcon [fab]=true icon="facebook"></CDBIcon>
    click me
</CDBBtn>
<CDBBtn color="success">
    <CDBIcon [fab]=true icon="reddit"></CDBIcon>
    click me
</CDBBtn>
<CDBBtn color="danger">
    <CDBIcon [fab]=true icon="twitter"></CDBIcon>
    click me
</CDBBtn>
<CDBBtn color="dark">
    <CDBIcon [fab]=true icon="instagram"></CDBIcon>
    click me
</CDBBtn>
<CDBBtn color="warning">
    <CDBIcon [fab]=true icon="google"></CDBIcon>
    click me
</CDBBtn>

Border Icons

html

<CDBIcon [fab]=true [border]=true icon="stack-overflow"></CDBIcon>
<CDBIcon [fab]=true [border]=true icon="facebook"></CDBIcon>
<CDBIcon [fab]=true [border]=true icon="reddit"></CDBIcon>
<CDBIcon [fab]=true [border]=true icon="twitter"></CDBIcon>
<CDBIcon [fab]=true [border]=true icon="instagram"></CDBIcon>
<CDBIcon [fab]=true [border]=true icon="google"></CDBIcon>

Spin Icons

image info

html

<CDBIcon [fab]=true [spin]=true icon="stack-overflow"></CDBIcon>
<CDBIcon [fab]=true [spin]=true icon="facebook"></CDBIcon>
<CDBIcon [fab]=true [spin]=true icon="reddit"></CDBIcon>
<CDBIcon [fab]=true [spin]=true icon="twitter"></CDBIcon>
<CDBIcon [fab]=true [spin]=true icon="instagram"></CDBIcon>
<CDBIcon [fab]=true [spin]=true icon="google"></CDBIcon>

Pull Icons

html

<CDBIcon [fab]=true pull="left" icon="stack-overflow"></CDBIcon>

Pulse Icons

image info

html

<CDBIcon [fab]=true [pulse]=true icon="stack-overflow"></CDBIcon>
<CDBIcon [fab]=true [pulse]=true icon="facebook"></CDBIcon>
<CDBIcon [fab]=true [pulse]=true icon="reddit"></CDBIcon>
<CDBIcon [fab]=true [pulse]=true icon="twitter"></CDBIcon>
<CDBIcon [fab]=true [pulse]=true icon="instagram"></CDBIcon>
<CDBIcon [fab]=true [pulse]=true icon="google"></CDBIcon>

Flip Icons

html

<CDBIcon [fab]=true flip="horizontal" icon="stack-overflow"></CDBIcon>
<CDBIcon [fab]=true flip="vertical" icon="facebook"></CDBIcon>

Rotate Icons

html

<CDBIcon [fab]=true rotate="90" icon="stack-overflow"></CDBIcon>
<CDBIcon [fab]=true rotate="180" icon="facebook"></CDBIcon>

Sizes

html

<CDBIcon icon="facebook" [fab]=true size="lg"></CDBIcon>
<CDBIcon [fab]=true icon="facebook" size="2x"></CDBIcon>
<CDBIcon [fab]=true icon="facebook" size="3x"></CDBIcon>
<CDBIcon [fab]=true icon="facebook" size="4x"></CDBIcon>
<CDBIcon [fab]=true icon="facebook" size="5x"></CDBIcon>

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.

Contrast Icon Bootstrap Modules used

import {IconModule } from 'cdbangular';

API Reference: Contrast Icon Inputs

The table below shows the possible input of the Icon component.

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
icon	String		`Required!` The Font Awesome icon name, which you want to use	icon="facebook"
border	Boolean	false	Adds border around icon	border=true
brand	Boolean	false	Sets brand icon category; `alias: fab`	[brand]=true icon="chevron"
fab	Boolean	false	Sets brand icon category; `alias: brand`	[fab]=true icon="twitter"
fal	Boolean	false	Sets light icon category; `alias: light`	[fal]=true icon="user"
far	Boolean	false	Sets light icon category; `alias: regular`	[far]=true icon="user"
fixed	Boolean	false	Sets fixed with of icons (i.e. inside list)	fixed=true icon="user"
flip	String		Flips icon; acceptable props: `horizontal` or `vertical`	flip="vertical" icon="user"
inverse	Boolean	false	Sets alternative icon color	inverse=true icon="user"
light	Boolean	false	Sets light icon category; `alias: fal`	light=true icon="facebook"
list	Boolean	false	Adds `fa-li` to the className	list=true icon="facebook"
pull	String		Pulls icon to the `right` or `left`	pull="left" icon="user"
pulse	Boolean	false	Rotates icon in 8 steps	pulse=true icon="facebook"
rotate	String		Rotates icon by `90`, `180` or `270` degrees	rotate="90" icon="facebook"
size	String		Increase icon size; accepts parameters: [`lg`, `2x`, `3x`, `4x`, `5x`]	size="5x" icon="facebook"
spin	Boolean	false	Spins the icon, you can combine this prop with `pulse`	[spin]=true
stack	String		Use class `fa-stack` on wrapper to stack multiple icons; use `1x` for regular sized icon and `2x` for larger one	class="fa-stack"... [far]=true icon="square" stack="2x" ... [fab]=true icon="twitter" stack="1x"

Collapse

Iframe