Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-material-design-icons with all npm packages installed. Try it out:

vue-material-design-icons lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("vue-material-design-icons/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-material-design-icons v4.1.0

A collection of material design icons as Vue single file components

Vue Material Design Icon Components

License: MIT npm download count Dependency status for latest release Vulnerability count from Snyk

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

Getting started

  1. Install the package

    npm install --save vue-material-design-icons
    

    OR

    yarn add vue-material-design-icons
    
  2. Optional, but recommended Add the included stylesheet to your root JS file, usually index.js or main.js:

    import 'vue-material-design-icons/styles.css';
    
  3. Import the icon, and declare it as a local component:

    import MenuIcon from 'vue-material-design-icons/Menu.vue';
    
    components: {
      MenuIcon;
    }
    

    OR

    Declare it as a global component:

    import MenuIcon from 'vue-material-design-icons/Menu.vue';
    
    Vue.component('menu-icon', MenuIcon);
    

    Note Icon files are pascal cased, e.g. CheckboxMarkedCircle.vue, and their default name has Icon appended e.g. CheckboxMarkedCircleIcon.

  4. Then use it in your template code!

    <menu-icon />
    

Props

  • title - This changes the hover tooltip as well as the title shown to screen readers. By default, those values are a "human readable" conversion of the icon names; for example chevron-down-icon becomes "Chevron down icon".

    Example:

    <android-icon title="this is an icon!" />
    
  • decorative - This denotes whether an icon is purely decorative, or has some meaninfgul value. If an icon is decorative, it will be hidden from screen readers. By default, this is false.

    Example:

    <android-icon decorative />
    
  • fillColor - This property allows you to set the fill colour of an icon via JS instead of requiring CSS changes. Note that any CSS values, such as fill: currentColor; provided by the optional CSS file, may override colours set with this prop.

    Example:

    <android-icon fillColor="#FF0000" />
    
  • size - This property overrides the width and height attributes on the SVG. The default is 24.

    Example:

    <android-icon :size="48" />
    

Icons

A list of the icons can be found at the Material Design Icons website. The icons packaged here are pascal cased versions of the names displayed on the website, to match the Vue Style Guide. For example, the icon named ultra-high-definition would be imported as "vue-material-design-icons/UltraHighDefinition.vue".

Tips

  • Use resolve in your Webpack config to clean up the imports:

    resolve: {
      alias : {
        "icons": path.resolve(__dirname, "node_modules/vue-material-design-icons")
      },
      extensions: [
        ".vue"
      ]
    }
    

    This will give you much shorter and more readable imports, like import Android from "icons/Android", rather than import Android from "vue-material-design-icons/Android.vue". Much better!

  • If you want custom sizing, add your own css to adjust the height and width of the icons

    .material-design-icon.icon-2x {
      height: 2em;
      width: 2em;
    }
    
    .material-design-icon.icon-2x > .material-design-icon__svg {
      height: 2em;
      width: 2em;
    }
    

    Then add your size class

    <fullscreen-icon class="icon-2x" />
    

    While I recommend using CSS for styling, you can also pass in a size prop, detailed in the Props section above.

Credits

Austin Andrews / Templarian for the MaterialDesign project. This supplies the SVG icons for this project, which are packaged as Vue single file components.

Elliot Dahl for this article on prototypr.io. This is where the recommended CSS comes from.

Attila Max Ruf / therufa for the mdi-vue library which inspired this one. It also produces single file components from material design icons.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free