🤩
Windframe Import Update is finally here.

Icon

Angular Bootstrap Icon

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

Importing the Contrast Angular Bootstrap Icon Module

To use the Contrast Angular Bootstrap Icon component in your project you need to import IconModule.

typescript
import {IconModule } from 'cdbangular';

Default Icon

Use the [fab] prop to indicate that we want to use brand icons in our project. The icon prop indicates the icon we want to use.

Angular Bootstrap Icon Default

html
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

Set the [border] prop to true to allow your icons have borders.

Angular Bootstrap Border Icons

html
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

Set your [spin] prop to true to spin your icons.

Angular Bootstrap Icons Spin

html
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

Use the pull prop to indicate the direction you want your icon to face.

Angular Bootstrap Icons Pull

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

Pulse Icons

Use the [pulse] prop to spin your icons a little faster

Angular Bootstrap Icons Pulse

html
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

Angular Bootstrap Icons Flip

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

Rotate Icons

Use the rotate prop to specify the angle to rotate your icons by.

Angular Bootstrap Icons Rotate

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

Sizes

Use the size prop to define how little or how large you want your icons to be.

Angular Bootstrap Icons Sizes

html
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 Reference: Contrast Angular Bootstrap Icon Props

This section will build on your information about the props you get to use with the Contrast Angular Bootstrap Icon component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBIcon component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
iconStringRequired! The Font Awesome icon name, which you want to useicon="facebook"
borderBooleanfalseAdds border around iconborder=true
brandBooleanfalseSets brand icon category; alias: fab[brand]=true icon="chevron"
fabBooleanfalseSets brand icon category; alias: brand[fab]=true icon="twitter"
falBooleanfalseSets light icon category; alias: light[fal]=true icon="user"
farBooleanfalseSets light icon category; alias: regular[far]=true icon="user"
fixedBooleanfalseSets fixed with of icons (i.e. inside list)fixed=true icon="user"
flipStringFlips icon; acceptable props: horizontal or verticalflip="vertical" icon="user"
inverseBooleanfalseSets alternative icon colorinverse=true icon="user"
lightBooleanfalseSets light icon category; alias: fallight=true icon="facebook"
listBooleanfalseAdds fa-li to the classNamelist=true icon="facebook"
pullStringPulls icon to the right or leftpull="left" icon="user"
pulseBooleanfalseRotates icon in 8 stepspulse=true icon="facebook"
rotateStringRotates icon by 90, 180 or 270 degreesrotate="90" icon="facebook"
sizeStringIncrease icon size; accepts parameters: [lg, 2x, 3x, 4x, 5x]size="5x" icon="facebook"
spinBooleanfalseSpins the icon, you can combine this prop with pulse[spin]=true
stackStringUse class fa-stack on wrapper to stack multiple icons; use 1x for regular sized icon and 2x for larger oneclass="fa-stack"... [far]=true icon="square" stack="2x" ... [fab]=true icon="twitter" stack="1x"

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast