Edit these docs Rate these docs

Vue Bootstrap Icons

Vue Icons - Bootstrap 4 & Material Design

Vue 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, 628 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 fa-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).


              <template>
                <mdb-icon icon="camera-retro" /> fa-camera-retro
              </template>
            

              <script>
                import { mdbIcon } from 'mdbvue';
                export default {
                  components: {
                    mdbIcon
                  }
                }
              </script>
            
  • 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

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

To increase icon sizes relative to their container, use the size="lg" (33% increase), size="2x", size="3x", size="4x", or size="5x" props.


              <template>
                <div>
                  <mdb-icon icon="camera-retro" size="lg" /> fa-lg
                  <mdb-icon icon="camera-retro" size="2x" /> fa-2x
                  <mdb-icon icon="camera-retro" size="3x" /> fa-3x
                  <mdb-icon icon="camera-retro" size="4x" /> fa-4x
                  <mdb-icon icon="camera-retro" size="5x" /> fa-5x
                </div>
              </template>
            

              <script>
                import { mdbIcon } from 'mdbvue';
                export default {
                  components: {
                    mdbIcon
                  }
                }
              </script>
            
  • 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.


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

              <script>
                import { mdbIcon } from 'mdbvue';
                export default {
                  components: {
                    mdbIcon
                  }
                }
              </script>
            

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.


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

              <script>
                import { mdbIcon } from 'mdbvue';
                export default {
                  components: {
                    mdbIcon
                  }
                }
              </script>
            

Buttons MDB Pro component

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


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

        <script>
          import { mdbIcon } from 'mdbvue';
          export default {
            components: {
              mdbIcon
            }
          }
        </script>
      

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.


        <template>
          <!--Section: Features v.4-->
          <section>
            <!--Section heading-->
            <h2 class="h1-responsive py-5 font-weight-bold text-center">Why is it so great?</h2>
            <!--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-->
            <mdb-row>
              <!--Grid column-->
              <mdb-col md="4">
                <!--Grid row-->
                <mdb-row class="mb-2">
                  <mdb-col col="2">
                    <mdb-icon icon="flag-checkered" size="2x" class="deep-purple-text" />
                  </mdb-col>
                  <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>
                </mdb-row>
                <!--Grid row-->

                <!--Grid row-->
                <mdb-row class="mb-2">
                  <mdb-col col="2">
                    <mdb-icon icon="flask" size="2x" class="deep-purple-text"></mdb-icon>
                  </mdb-col>
                  <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>
                </mdb-row>
                <!--Grid row-->

                <!--Grid row-->
                <mdb-row class="mb-2">
                  <mdb-col col="2">
                    <mdb-icon icon="glass" size="2x" class="deep-purple-text"></mdb-icon>
                  </mdb-col>
                  <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>
                </mdb-row>
                <!--Grid row-->

              </mdb-col>
              <!--Grid column-->

              <!--Grid column-->
              <mdb-col md="4" class="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">
              </mdb-col>
              <!--Grid column-->

              <!--Grid column-->
              <mdb-col md="4">
                <!--Grid row-->
                <mdb-row class="mb-2">
                  <mdb-col col="2">
                    <mdb-icon icon="heart" size="2x" class="deep-purple-text"></mdb-icon>
                  </mdb-col>
                  <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>
                </mdb-row>
                <!--Grid row-->

                <!--Grid row-->
                <mdb-row class="mb-2">
                  <mdb-col col="2">
                    <mdb-icon icon="bolt" size="2x" class="deep-purple-text"></mdb-icon>
                  </mdb-col>
                  <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>
                </mdb-row>
                <!--Grid row-->

                <!--Grid row-->
                <mdb-row class="mb-2">
                  <mdb-col col="2">
                    <mdb-icon icon="magic" size="2x" class="deep-purple-text"></mdb-icon>
                  </mdb-col>
                  <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>
                </mdb-row>
                <!--Grid row-->
              </mdb-col>
              <!--Grid column-->
            </mdb-row>
            <!--Grid row-->
          </section>
          <!--/Section: Features v.4-->
        </template>
      

        <script>
          import { mdbIcon, mdbRow, mdbCol } from 'mdbvue';
          export default {
            components: {
              mdbIcon,
              mdbRow,
              mdbCol
            }
          }
        </script>
      

Full list

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

Icons list

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download