Vue Material Design Icon Components
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.
Install the packagenpm install --save vue-material-design-icons
ORyarn add vue-material-design-icons
Optional, but recommended Add the included stylesheet to your root JS file, usually
Import the icon, and declare it as a local component:;components:MenuIcon;
Declare it as a global component:;Vue;
Note Icon files are pascal cased, e.g.
CheckboxMarkedCircle.vue, and their default name has
Then use it in your template code!
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-iconbecomes "Chevron down 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
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.
size- This property overrides the
heightattributes on the SVG. The default is
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
ultra-high-definition would be imported as
resolvein your Webpack config to clean up the imports:resolve:alias :"icons": pathextensions:".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
Then add your size class
While I recommend using CSS for styling, you can also pass in a
sizeprop, detailed in the