Notifications can include icons to improve the user experience and to construct a more pleasant and intuitive notification. To make this, use the icon
property. A practical example would be: icon: 'chat'
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
Icon Mail
Icon check_box
Icon favorite
Icon error
Icon chat
Icon Random Color
<template>
<div class="demo-alignment">
<vs-button color="primary" type="flat"
@click="$vs.notify({
title:'Icon mail',
text:'Lorem ipsum dolor sit amet, consectetur',
color:'primary',
iconPack: 'feather',
icon:'icon-mail'})">Icon Mail</vs-button>
<vs-button color="success" type="flat"
@click="$vs.notify({
title:'Icon mail',
text:'Lorem ipsum dolor sit amet, consectetur',
color:'success',
iconPack: 'feather',
icon:'icon-check'})">Icon check_box</vs-button>
<vs-button color="danger" type="flat"
@click="$vs.notify({
title:'Icon mail',
text:'Lorem ipsum dolor sit amet, consectetur',
color:'danger',
iconPack: 'feather',
icon:'icon-heart'})">Icon favorite</vs-button>
<vs-button color="warning" type="flat"
@click="$vs.notify({
title:'Icon mail',
text:'Lorem ipsum dolor sit amet, consectetur',
color:'warning',
iconPack: 'feather',
icon:'icon-alert-circle'})">Icon error</vs-button>
<vs-button color="dark" type="flat"
@click="$vs.notify({
title:'Icon mail',
text:'Lorem ipsum dolor sit amet, consectetur',
color:'dark',
iconPack: 'feather',
icon:'icon-message-square'})">Icon chat</vs-button>
<vs-button @click="randomIcon()" color="success" type="gradient">Icon Random Color</vs-button>
</div>
</template>
<script>
export default {
methods: {
randomIcon() {
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
let color = `rgb(${getRandomInt(0,255)},${getRandomInt(0,255)},${getRandomInt(0,255)})`
this.$vs.notify({ title: 'Icon mail', text: 'Lorem ipsum dolor sit amet, consectetur', color: color, icon: 'verified_user' })
}
}
}
</script>