Icons

Vue Bootstrap 5 Icons

Basic usage

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


        <template>
          <MDBIcon icon="camera-retro" />
        </template>
      

        <script>
          import { MDBIcon } from 'mdb-vue-ui-kit';

          export default {
            components: {
              MDBIcon,
            },
          };
        </script>

To increase icon sizes relative to their container, use the fa-xs, fa-sm, fa-lg (33% increase), fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x classes. 


        <template>
          <MDBIcon icon="camera" size="xs" />
          <MDBIcon icon="camera" size="sm" />
          <MDBIcon icon="camera" size="lg" />
          <MDBIcon icon="camera" size="2x" />
          <MDBIcon icon="camera" size="3x" />
          <MDBIcon icon="camera" size="4x" />
          <MDBIcon icon="camera" size="5x" />
          <MDBIcon icon="camera" size="6x" />
          <MDBIcon icon="camera" size="7x" />
          <MDBIcon icon="camera" size="8x" />
          <MDBIcon icon="camera" size="9x" />
          <MDBIcon icon="camera" size="10x" />
        </template>
      

        <script>
          import { MDBIcon } from 'mdb-vue-ui-kit';

          export default {
            components: {
              MDBIcon,
            },
          };
        </script>

To change icon style use iconStyle property.


        <template>
          <MDBIcon icon="mdb" iconStyle="fab" size="3x" />
        </template>
      

        <script>
          import { MDBIcon } from 'mdb-vue-ui-kit';

          export default {
            components: {
              MDBIcon,
            },
          };
        </script>

Icons - API

Import


        import { MDBIcon } from 'mdb-vue-ui-kit';

Properties

Name Type Default Description Example
icon String '' Defines icon. <MDBIcon icon="camera" />
iconStyle String 'fas' Defines icon style. Available options: fas, far, fab, fal, fad. <MDBIcon icon="mdb" iconStyle="fab" />
size String '' Defines icon size. <MDBIcon icon="camera" size="3x" />
flag String '' Changes icon to a flag. <MDBIcon flag="fr" />