Angular Bootstrap Icons

Angular icons - Bootstrap 4 & Material Design

Angular Bootstrap icons usage is a quick tutorial which describes the proper way of using Font Awesome icons in Bootstrap framework.

MDB uses a powerful set of icons called Font Awesome.

One Font, over 1400 Icons

In a single collection, Font Awesome is a pictographic language of web-related actions.

No JavaScript Required

Fewer compatibility concerns because Font Awesome doesn't require JavaScript.

Infinite Scalability

Scalable vector graphics means every icon looks awesome at any size.

Free, as in Speech

Font Awesome is completely free for commercial use.

CSS Control

Easily style icon color, size, shadow, and anything that's possible with CSS.

Perfect on Retina Displays

Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

Accessibility-minded

Font Awesome loves screen readers and helps make your icons accessible on the web.

Font Awesome version 5 has been re-written and re-designed completely from scratch.

What’s Changed

  • 3 Different Icon Styles - every icon is introduced in a solid, regular, and light style. Brand icons are separated into their own style/category for easier use. Version 5 has four prefixes to let us set the style of any icon easily:
New Prefix Icon Style SVG + JS Filename Web Font Filename Availability
fab Font Awesome Brands brands.js fa-brands-400.* Free
fas or fa Font Awesome Solid solid.js fa-solid-900.* Free
far Font Awesome Regular regular.js fa-regular-400.* Pro only
fal Font Awesome Light light.js fa-light-300.* Pro only
  • Icon Name Changes - Aliases have been removed in version 5, each icon has one official name and some of those names have been adjusted under new standard and conventions.
  • Outline Style Icons - Similarly, all icons that had an outlined style (and usually ended with -o) now have a prefix of far and have had their -o suffix removed.

We have implemented corresponding properties in our MDBIcon component. To find and fast implement your desired icon use our icon list with search tool.

Basic usage

Example: basic icon camera-retro

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct). 



              <mdb-icon fas icon="camera-retro"></mdb-icon> camera-retro
  • Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same thing goes for color, drop shadow, and anything else that gets inherited using CSS.

Larger icons

lg

2x

3x

4x

5x

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes. 



              <mdb-icon fas icon="camera-retro" size="lg"></mdb-icon> lg
              <mdb-icon fas icon="camera-retro" size="2x"></mdb-icon> 2x
              <mdb-icon fas icon="camera-retro" size="3x"></mdb-icon> 3x
              <mdb-icon fas icon="camera-retro" size="4x"></mdb-icon> 4x
              <mdb-icon fas icon="camera-retro" size="5x"></mdb-icon> 5x
  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Colors

amber-text

red-text

indigo-text

cyan-text

green-text

To see all colors options, go to colors list. 



              <p><mdb-icon fas icon="bolt" size="3x" class="amber-text pr-3" aria-hidden="true"></mdb-icon> amber-text</p>
              <p><mdb-icon fas icon="bug" size="3x" class="red-text pr-3" aria-hidden="true"></mdb-icon> red-text</p>
              <p><mdb-icon fas icon="heart" size="3x" class="indigo-text pr-3" aria-hidden="true"></mdb-icon> indigo-text</p>
              <p><mdb-icon fas icon="bell" size="3x" class="cyan-text pr-3" aria-hidden="true"></mdb-icon> cyan-text</p>
              <p><mdb-icon fas icon="birthday-cake" size="3x" class="green-text pr-3" aria-hidden="true"></mdb-icon> green-text</p>

Margins

ml-3

mr-3

mx-4

my-4

m-5

You can add spacing to your icons from the top, bottom, right, left or all sides. Look at here to see all possibilities. 



              <p><mdb-icon fas icon="gift" size="2x" class="pink-text ml-3" aria-hidden="true"></mdb-icon> ml-3</p>
              <p><mdb-icon fas icon="gift" size="2x" class="pink-text mr-3" aria-hidden="true"></mdb-icon> mr-3</p>
              <p><mdb-icon fas icon="gift" size="2x" class="pink-text mx-4" aria-hidden="true"></mdb-icon> mx-4</p>
              <p><mdb-icon fas icon="gift" size="2x" class="pink-text my-4" aria-hidden="true"></mdb-icon> my-4</p>
              <p><mdb-icon fas icon="gift" size="2x" class="pink-text m-5" aria-hidden="true"></mdb-icon> m-5</p>

Buttons

It's good to improve the appearance of your buttons with icons. Look at here to see the other buttons options.



        <a class="btn-floating btn-lg purple-gradient"><mdb-icon fas icon="bolt"></mdb-icon></a>
        <button type="button" class="btn btn-info btn-rounded btn-lg">Button<mdb-icon fas icon="heart" class="ml-2" aria-hidden="true"></mdb-icon></button>
        <button type="button" class="btn btn-outline-default btn-rounded waves-effect"><mdb-icon far icon="gem" class="mr-2"
            aria-hidden="true"></mdb-icon>Button</button>
        <button type="button" class="btn btn-indigo btn-md">Button<mdb-icon fas icon="thumbs-up" class="ml-2" aria-hidden="true"></mdb-icon></button>
        <button type="button" class="btn btn-outline-warning waves-effect btn-sm"><mdb-icon fas icon="user" class="mr-2"
            aria-hidden="true"></mdb-icon>Button</button>

Features

Icons are very useful when you want to show the features of something. Look at here to see more our features sections.

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

International

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Experimental

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Relaxing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Beloved

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Rapid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Magical

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.



        <!--Section: Features v.4-->
        <section>

          <!--Section heading-->
          <h1 class="py-5 font-weight-bold text-center">Why is it so great?</h1>
          <!--Section description-->
          <p class="px-5 mb-5 pb-3 lead grey-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam.</p>

          <!--Grid row-->
          <div class="row">

            <!--Grid column-->
            <div class="col-md-4">

              <!--Grid row-->
              <div class="row mb-2">
                <div class="col-2">
                  <mdb-icon fas icon="flag-checkered" size="2x" class="deep-purple-text"></mdb-icon>
                </div>
                <div class="col-10 text-left">
                  <h5 class="font-weight-bold">International</h5>
                  <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                    nam, aperiam minima assumenda
                    deleniti hic.</p>
                </div>
              </div>
              <!--Grid row-->

              <!--Grid row-->
              <div class="row mb-2">
                <div class="col-2">
                  <mdb-icon fas icon="flask" size="2x" class="deep-purple-text"></mdb-icon>
                </div>
                <div class="col-10 text-left">
                  <h5 class="font-weight-bold">Experimental</h5>
                  <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                    nam, aperiam minima assumenda
                    deleniti hic.</p>
                </div>
              </div>
              <!--Grid row-->

              <!--Grid row-->
              <div class="row mb-2">
                <div class="col-2">
                  <mdb-icon fas icon="glass-martini" size="2x" class="deep-purple-text"></mdb-icon>
                </div>
                <div class="col-10 text-left">
                  <h5 class="font-weight-bold">Relaxing</h5>
                  <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                    nam, aperiam minima assumenda
                    deleniti hic.</p>
                </div>
              </div>
              <!--Grid row-->

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-4 mb-2 center-on-small-only flex-center">
              <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="" class="z-depth-0">
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-4">

              <!--Grid row-->
              <div class="row mb-2">
                <div class="col-2">
                  <mdb-icon fas icon="heart" size="2x" class="deep-purple-text"></mdb-icon>
                </div>
                <div class="col-10 text-left">
                  <h5 class="font-weight-bold">Beloved</h5>
                  <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                    nam, aperiam minima assumenda
                    deleniti hic.</p>
                </div>
              </div>
              <!--Grid row-->

              <!--Grid row-->
              <div class="row mb-2">
                <div class="col-2">
                  <mdb-icon fas icon="bolt" size="2x" class="deep-purple-text"></mdb-icon>
                </div>
                <div class="col-10 text-left">
                  <h5 class="font-weight-bold">Rapid</h5>
                  <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                    nam, aperiam minima assumenda
                    deleniti hic.</p>
                </div>
              </div>
              <!--Grid row-->

              <!--Grid row-->
              <div class="row mb-2">
                <div class="col-2">
                  <mdb-icon fas icon="magic" size="2x" class="deep-purple-text"></mdb-icon>
                </div>
                <div class="col-10 text-left">
                  <h5 class="font-weight-bold">Magical</h5>
                  <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                    nam, aperiam minima assumenda
                    deleniti hic.</p>
                </div>
              </div>
              <!--Grid row-->

            </div>
            <!--Grid column-->

          </div>
          <!--Grid row-->

        </section>
        <!--/Section: Features v.4-->

Full list

To see the full list of available icons click the button below

Icons list

Angular Icons - API

In this section you will find informations about required modules and available outputs of the icons component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

// MDB Angular Pro
import { IconsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { IconsModule } from 'angular-bootstrap-md'
Import example Modules list

Inputs

MdbIcon
Name Type Default Description Example
icon string - Used to set the icon class. Don't add the fa- prefix. icon="user"
size string - Used to set the icon size class. Don't add the fa- prefix. size="5x"
classInside string - Used to set the class to the component inside element. classInside="dropdown-toggle"

Directives

Name Selector Description
FabDirective fab, brands Use to set the 'fab' prefix of the icon.
FalDirective fal, light Use to set the 'fal' prefix of the icon.
FarDirective far, regular Use to set the 'far' prefix of the icon.
FasDirective fas, solid Use to set the 'fas' prefix of the icon.