Icons

Vue Bootstrap 5 Icons

Basic usage

You can place icons just about anywhere using the MDBIcon component. Use icon property to define icon name. 

        
            
        <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 size property. It works with xs, sm, lg values (33% increase), and with literal sizes (to scale it from 1x to 10x) 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x. 

        
            
        <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. Default style is fas

        
            
        <template>
          <MDBIcon icon="mdb" iconStyle="fab" size="3x" />
        </template>
      
        
    
        
            
        <script>
          import { MDBIcon } from 'mdb-vue-ui-kit';

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

You can make all your icons the same width so they can easily vertically align, like in a list or navigation menu.

Add fw property to the MDBIcon component to set one or more icons to the same fixed width. This is great to use when varying icon widths (e.g. a tall but skinny icon atop a wide but short icon) would throw off vertical alignment. For clarity in the following example, we’ve added a background color on the icon so you can see the fixed width and also bumped up the font-size of the parent element.

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow
        
            
        <template>
          <div style="font-size: 2rem">
            <div>
              <MDBIcon solid icon="skating" fw style="background: DodgerBlue" />
              Skating
            </div>
            <div>
              <MDBIcon solid icon="skiing" fw style="background: SkyBlue" />
              Skiing
            </div>
            <div>
              <MDBIcon solid icon="skiing" fw style="background: DodgerBlue" />
              Nordic Skiing
            </div>
            <div>
              <MDBIcon solid icon="snowboarding" fw style="background: SkyBlue" />
              Snowboarding
            </div>
            <div>
              <MDBIcon solid icon="snowplow" fw style="background: DodgerBlue" />
              Snowplow
            </div>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { MDBIcon } from 'mdb-vue-ui-kit';

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

Icons - API

Import

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

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" />