Angular Bootstrap icons

MDB uses a powerful set of icons called Font Awesome.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

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 screen readers and helps make your icons accessible on the web.

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 icon="camera-retro"></mdb-icon>

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

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


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

If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Full list of icons

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

Icons list