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