vue-material-symbols

Vue3 material design symbols fully typed component. Works well with TypeScript and JavaScript. Provides easy customization by CSS classes. Fonts based on https://fonts.google.com/icons.

Demo

Open demo

How to start

Installation

npm install @dbetka/vue-material-symbols

Setup in a project with default configuration

Add as Vue3 plugin:

import materialSymbolsPlugin from '@dbetka/vue-material-symbols';
import 'material-symbols/index.css';

const app = createApp(App);
app.use(materialSymbolsPlugin);
// defaultType: 'outlined',
// defaultWeight: '300',
// defaultGrade:  'medium',
// defaultSize: 24,
// defaultFilled: false,

Setup in project with configuration

import materialSymbolsPlugin from '@dbetka/vue-material-symbols';
import 'material-symbols/index.css';

const app = createApp(App);
app.use(materialSymbolsPlugin, {
  defaultWeight: '100',
  defaultGrade: 'thin',
  defaultSize: 24,
  defaultType: 'outlined',
  defaultFilled: false,
});

Setup in project with responsive size

import materialSymbolsPlugin from '@dbetka/vue-material-symbols';
import 'material-symbols/index.css';

const app = createApp(App);
app.use(materialSymbolsPlugin, {
  defaultSize: '1.5em',
});

Usage

Base examples

<script setup>
  import { MaterialSymbol } from '@dbetka/vue-material-symbols';
</script>
<template>
  <div>
    <MaterialSymbol name="delete" />
    <MaterialSymbol name="delete" filled />
    <MaterialSymbol name="delete" type="outlined" />
    <MaterialSymbol name="delete" type="rounded" />
    <MaterialSymbol name="delete" type="sharp" />
    <MaterialSymbol name="delete" size="26" />
  </div>
</template>

Usage in Composition API

<script setup lang="ts">
  import { MaterialSymbol, SymbolsProp } from '@dbetka/vue-material-symbols';
  import { computed } from 'vue';

  const props = defineProps({
    done: Boolean,
  });

  const symbolName = computed<SymbolsProp>(() => props.done ? 'done' : 'hourglass_empty')
</script>
<template>
  <div>
    <MaterialSymbol :name="symbolName" />
  </div>
</template>

Or without TypeScript:

<script setup>
  import { useSymbols, MaterialSymbol } from '@dbetka/vue-material-symbols';
  import { computed } from 'vue';

  const props = defineProps({
    done: Boolean,
  });

  const symbols = useSymbols()
  const symbolName = computed(() => props.done ? symbols.names.done : symbols.names.hourglass_empty)
</script>
<template>
  <div>
    <MaterialSymbol :name="symbolName" />
  </div>
</template>

Own styles

Set icon color

Component with CSS example:

<script setup>
  import { MaterialSymbol } from '@dbetka/vue-material-symbols';
</script>
<template>
  <div>
    <MaterialSymbol name="delete" class="red"/>
  </div>
</template>

<style>
.red {
   color: red;
}
</style>

Symbols metadata

Access to symbols metadata:

<script setup lang="ts">
  import { metadata } from '@dbetka/vue-material-symbols/dist/metadata';
  import { computed } from 'vue';
  
  /*** SymbolMetadata
    name: string
    version: number
    popularity: number
    codepoint: number
    categories: string[]
    tags: string[]
   */
  
  const symbolsSortedByPopularity = computed(() => metadata.sort((a, b) => b.popularity - a.popularity))
</script>
<template>
  <div>
    <MaterialSymbol v-for="symbol of symbolsSortedByPopularity" :key="symbol.name" :name="symbol.name" />
  </div>
</template>