Vue Material Design Icon Size Components
This library is just simple fork: https://gitlab.com/robcresswell/vue-material-design-icons which was added the possibility of manipulating the size of the icons.
Getting started
-
Install the package
npm install --save vue-material-design-icons-size -
Optional, but recommended Add the included stylesheet to your root JS file, usually
index.js
ormain.js
: -
Import the icon, and declare it as a local component:
components:MenuIconOR
Declare it as a global component:
VueNote Icon files are pascal cased, e.g.
CheckboxMarkedCircle.vue
, and their default name hasIcon
appended e.g.CheckboxMarkedCircleIcon
. -
Then use it in your template code!
Props
-
width
- This property lets you set the height of the icon.Example:
-
height
- This property lets you set the height of the icon.Example:
-
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 examplechevron-down-icon
becomes "Chevron down icon".Example:
-
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 isfalse
.Example:
-
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 asfill: currentColor;
provided by the optional CSS file, may override colours set with this prop.Example:
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-size/UltraHighDefinition.vue"
.
Tips
-
Use
resolve
in 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 thanimport Android from "vue-material-design-icons-size/Android.vue"
. Much better! -
Add click handlers to the icons with
@click.native
. For example:You can learn more about this by reading the Vue docs on Binding Native Events to Components