Search...

Icon

Contrast Angular Bootstrap Icon

Contrast Angular Bootstrap Icons are representative symbols or elements that can serve as a link, provide information, or simply be aesthetic.

Importing the Contrast Angular Bootstrap Icon Module

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

ts
import {IconModule } from 'cdbangular';

Default Icons

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: brand[brand]=true icon="chevron"
fabBooleanfalseSets brand icon category; alias: fab[fab]=true icon="twitter"
falBooleanfalseSets light icon category; alias: fal[fal]=true icon="user"
farBooleanfalseSets light icon category; alias: far[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: lightlight=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"

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner