@dbetka/vue-material-icons v1.0.4

vue-material-icons

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.

• How to start
  • Installation
  • Setup in project
• Usage
  • Base examples
  • Usage in Composition API
• Own styles
  • Set icon color
  • Set icon size by style

How to start

Installation

npm install -D @dbetka/vue-material-icons@latest

Setup in project

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);

Usage

Base examples

<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>

Usage in Composition API

<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>

Own styles

Icon component CSS class is material-icon. You can modify this class styles by new CSS styles.

Set icon color

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>

Set icon size by 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)