Vue Material -


Material icons uses geometric shapes to visually represent core ideas, capabilities, or topics. They are generally used along with the Material icons, but not restricted to. Icons can use icon fonts or external SVGs. Also, can accept some size dimensions, like 2x, 3x, 4x and 5x.

Material Icon Font

By default the md-icon will assume that you are using the Material Icons Font. You have to pass the name of the icon with underscore instead of spaces. For example: <md-icon>thumb_up</md-icon>.

Material Icons

API - md-icon

The following options can be applied to all icons:

md-size-[dimension] Increases the size of the icon. It accepts 2x, 3x, 4x or 5x md-size-3x

Custom Fonts

Alternatevely you can load any custom fonts to be used with md-icon, like Font Awesome for example. Just use the Font Awesome (or any other) classes.

Font Awesome

SVG Source

When loading an icon font, you will be able to use ALL of it's icons. This may hurts the performance of your application. Instead, you can use only the icons that you really need, loading them using svg.

SVG Assets


The following option is specifically for svg icons:

md-src The source of the svg icon. Note that for icons on external domais, cors may affect it's functionality. null