Icons
In the Olobase Admin framework, the 7.0.96 version of the Material Design Icons (mdi) series is used by default for all icons. If you want to upgrade the icon version, all you have to do is;
npm remove @mdi/fontuninstall the current version with the command,
npm install @mdi/font --saveupgrade to the current version with the command. You can access the Mdi icon library from the link below.
https://pictogrammers.com/library/mdi/
Examples
<template>
<div>
<v-card>
<v-card-text>
<v-icon
size="large"
icon="mdi-circle-slice-4"
class="mb-3"
color="success"
>
</v-icon>
<v-divider class="mb-3"></v-divider>
<v-icon
size="large"
color="primary"
class="mb-3"
icon="mdi-circle"
></v-icon>
<v-divider class="mb-3"></v-divider>
<v-btn
prepend-icon="mdi-content-save-cog"
class="mb-3"
>
Save
</v-btn>
<v-divider class="mb-3"></v-divider>
<v-btn
append-icon="mdi-content-save-cog"
class="mb-3"
>
Save
</v-btn>
</v-card-text>
</v-card>
</div>
</template>You can also use icons in navigation menu main links, as in the example below.
src/_nav.js
export default {
build: async function(t, admin) {
const user = await admin.can(["user"]);
const adminUser = await admin.can(["user", "admin"]);
return [
{
icon: "mdi-view-dashboard-outline",
text: t("menu.dashboard"),
link: "/dashboard",
},
// { divider: true },
]
}
}