@apostrophecms/vue-material-design-icons

Vue Material Design Icons

A fork of vue-material-design-icons to maintain consistent icons naming for ApostropheCMS users.

Installation

To install the module, use the command line to run this command in an Apostrophe project's root directory:

npm install @apostrophecms/vue-material-design-icons

See how to register and use icons from this library in your Apostrophe project here.

They also can be used in you vue components directly:

import CheckIcon from '@apostrophecms/vue-material-design-icons/Check.vue';

components: {
  CheckIcon;
}

Then use it in your template code!

<CheckIcon />

Optional Add the included stylesheet. This few lines of CSS will cause the icons to scale with any surrounding text, which can be helpful when you primarily style with CSS. Note that if you intend to handle sizing with the size prop, you probably don't want to use this as it may conflict.

import '@apostrophecms/vue-material-design-icons/styles.css';

Props

• title - This changes the hover tooltip as well as the title shown to screen readers. For accessibility purposes, if a title is not provided, then the icon is hidden from screen readers. This is to force developers to use meaningful titles for their icon usage.

  Example:

  <CheckIcon title="this is an icon!" />

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

  <CheckIcon fillColor="#FF0000" />

• size - This property overrides the width and height attributes on the SVG. The default is 24.

  Example:

  <CheckIcon :size="48" />

Credits

Rob Cresswell / robcresswell for the Vue Material Design Icons project. This library has been forked on.