Icons - Material

We've design a set of custom icons as components that can help you for different purposes.

Basket

<template>
 <Basket size="48px" />
</template>

<script>
import Basket from '@/examples/Icon/Basket.vue";
export default { components: { Basket, }, };
</script>

1<template>
2 <Basket size="48px" />
3</template>
4
5<script>
6import Basket from '@/examples/Icon/Basket.vue";
7export default { components: { Basket, }, };
8</script>

Props Information

Name	Type	Default	Description
size	string		Used to set the `width` and `height` of the icon.

Credit Card

<template>
 <CreditCard size="48px" />
</template>

<script>
import CreditCard from '@/examples/Icon/CreditCard.vue";
export default { components: { CreditCard, }, };
</script>

1<template>
2 <CreditCard size="48px" />
3</template>
4
5<script>
6import CreditCard from '@/examples/Icon/CreditCard.vue";
7export default { components: { CreditCard, }, };
8</script>

Box3d

<template>
 <Box3d size="48px" />
</template>

<script>
import Box3d from '@/examples/Icon/Box3d.vue";
export default { components: { Box3d, }, };
</script>

1<template>
2 <Box3d size="48px" />
3</template>
4
5<script>
6import Box3d from '@/examples/Icon/Box3d.vue";
7export default { components: { Box3d, }, };
8</script>

Customer Support

<template>
 <CustomerSupport size="48px" />
</template>

<script>
import CustomerSupport from '@/examples/Icon/CustomerSupport.vue";
export default { components: { CustomerSupport, }, };
</script>

1<template>
2 <CustomerSupport size="48px" />
3</template>
4
5<script>
6import CustomerSupport from '@/examples/Icon/CustomerSupport.vue";
7export default { components: { CustomerSupport, }, };
8</script>

Document

<template>
 <Document size="48px" />
</template>

<script>
import Document from '@/examples/Icon/Document.vue";
export default { components: { Document, }, };
</script>

1<template>
2 <Document size="48px" />
3</template>
4
5<script>
6import Document from '@/examples/Icon/Document.vue";
7export default { components: { Document, }, };
8</script>

Getting Started

<template>
 <GettingStarted size="48px" />
</template>

<script>
import GettingStarted from '@/examples/Icon/GettingStarted.vue";
export default { components: { GettingStarted, }, };
</script>

1<template>
2 <GettingStarted size="48px" />
3</template>
4
5<script>
6import GettingStarted from '@/examples/Icon/GettingStarted.vue";
7export default { components: { GettingStarted, }, };
8</script>

Air

<template>
 <Air size="48px" />
</template>

<script>
import Air from '@/examples/Icon/Air.vue";
export default { components: { Air, }, };
</script>

1<template>
2 <Air size="48px" />
3</template>
4
5<script>
6import Air from '@/examples/Icon/Air.vue";
7export default { components: { Air, }, };
8</script>

Humidity

<template>
 <Humidity size="48px" />
</template>

<script>
import Humidity from '@/examples/Icon/Humidity.vue";
export default { components: { Humidity, }, };
</script>

1<template>
2 <Humidity size="48px" />
3</template>
4
5<script>
6import Humidity from '@/examples/Icon/Humidity.vue";
7export default { components: { Humidity, }, };
8</script>

Lights

<template>
 <Lights size="48px" />
</template>

<script>
import Lights from '@/examples/Icon/Lights.vue";
export default { components: { Lights, }, };
</script>

1<template>
2 <Lights size="48px" />
3</template>
4
5<script>
6import Lights from '@/examples/Icon/Lights.vue";
7export default { components: { Lights, }, };
8</script>

Office

<template>
<Office size="48px" />
</template>

<script>
import Office from '@/examples/Icon/Office.vue";
export default { components: { Office, }, };
</script>

1<template>
2<Office size="48px" />
3</template>
4
5<script>
6import Office from '@/examples/Icon/Office.vue";
7export default { components: { Office, }, };
8</script>

Settings

<template>
<Settings size="48px" />
</template>

<script>
import Settings from '@/examples/Icon/Settings.vue";
export default { components: { Settings, }, };
</script>

1<template>
2<Settings size="48px" />
3</template>
4
5<script>
6import Settings from '@/examples/Icon/Settings.vue";
7export default { components: { Settings, }, };
8</script>

Shop

<template>
 <Shop size="48px" />
</template>

<script>
import Shop from '@/examples/Icon/Shop.vue";
export default { components: { Shop, }, };
</script>

1<template>
2 <Shop size="48px" />
3</template>
4
5<script>
6import Shop from '@/examples/Icon/Shop.vue";
7export default { components: { Shop, }, };
8</script>

Spaceship

<template>
 <Spaceship size="48px" />
</template>

<script>
import Spaceship from '@/examples/Icon/Spaceship.vue";
export default { components: { Spaceship, }, };
</script>

1<template>
2 <Spaceship size="48px" />
3</template>
4
5<script>
6import Spaceship from '@/examples/Icon/Spaceship.vue";
7export default { components: { Spaceship, }, };
8</script>

Switches

<template>
 <Switches size="48px" />
</template>

<script>
import Switches from '@/examples/Icon/Switches.vue";
export default { components: { Switches, }, };
</script>

1<template>
2 <Switches size="48px" />
3</template>
4
5<script>
6import Switches from '@/examples/Icon/Switches.vue";
7export default { components: { Switches, }, };
8</script>

Temperature

<template>
 <Temperature size="48px" />
</template>

<script>
import Temperature from '@/examples/Icon/Temperature.vue";
export default { components: { Temperature, }, };
</script>

1<template>
2 <Temperature size="48px" />
3</template>
4
5<script>
6import Temperature from '@/examples/Icon/Temperature.vue";
7export default { components: { Temperature, }, };
8</script>

Wifi

<template>
 <Wifi size="48px" />
</template>

<script>
import Wifi from '@/examples/Icon/Wifi.vue";
export default { components: { Wifi, }, };
</script>

1<template>
2 <Wifi size="48px" />
3</template>
4
5<script>
6import Wifi from '@/examples/Icon/Wifi.vue";
7export default { components: { Wifi, }, };
8</script>