Vue3 material design icons with easy access to icons names and types (all available in IDE hints). Hints were tested on IntelliJ IDE. Fonts based on https://fonts.google.com/icons.
npm install -D @dbetka/vue-material-icons@latest
Add as Vue3 plugin:
import '@dbetka/vue-material-icons/dist/index.css'
import materialIcons from '@dbetka/vue-material-icons';
const app = createApp(App);
app.use(materialIcons);
<template>
<div>
<material-icon name="delete" />
<material-icon name="delete" filled/>
<material-icon name="delete" outlined/>
<material-icon name="delete" round/>
<material-icon name="delete" sharp/>
<material-icon name="delete" two-tone/>
<material-icon name="delete" size="26"/>
</div>
</template>
<script>
export default {
name: 'some-component',
};
</script>
<template>
<div>
<material-icon :name="elIcon" />
</div>
</template>
<script>
import { useIcons } from '@dbetka/vue-material-icons';
export default {
name: 'some-component',
props: {
done: Boolean,
},
setup(props) {
const icons = useIcons()
const elIcon = computed(() => props.done ? icons.names.done : icons.names.hourglass_empty)
return {
elIcon
}
}
};
</script>
Icon component CSS class is material-icon
. You can modify this class styles by new CSS styles.
Component with CSS example:
<template>
<div>
<material-icon name="delete" class="red"/>
</div>
</template>
<script>
export default {
name: 'some-page',
};
</script>
<style>
.material-icon.red {
color: red;
}
</style>
Component with CSS example:
<template>
<div>
<material-icon name="delete" class="bigger"/>
</div>
</template>
<script>
export default {
name: 'some-page',
};
</script>
<style>
.material-icon.bigger {
font-size: 64px;
width: 64px;
height: 64px;
}
</style>
SASS example:
// mixins.sass
=icon-size($size)
font-size: $size
width: $size
height: $size
// icons.sass
.material-icon.bigger
+icon-size(64px)