<html>
<head>
<!-- Load Vuetify Icon and Styles -->
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.css">
</head>
<body>
<div id="app">
<!-- Create Vuetify App -->
<v-app>
<v-main>
<v-container>
<h3>Vuetify mdi-delete</h3>
<v-icon>mdi-delete</v-icon><br>
<br>
<v-btn color='error' icon='mdi-delete'></v-btn>
<br><br>
<v-btn color='warning'> <v-icon>mdi-delete</v-icon> Delete</v-btn>
</v-container>
</v-main>
</v-app>
</div>
<!-- Load Vue.js and Vuetify script -->
<script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.js"></script>
<!-- Create Vue.js and Vuetify app -->
<script type="module">
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp({
data() {
return {
};
},
}).use(vuetify).mount('#app'); // Mount the app to the #app element
</script>
</body>
</html>