Resize & change color

[KingKnecht]

Hi,
how would I resize or change color of an icon?

Thx,
Sven

[therufa]

hi @KingKnecht,
all the icons have 2 classes by default which are placed directly to the svg tag. so basically you can style them using simple css. To change the color for all the icons you could set the fill option on the .mdi-vue class to the color you desire for size just set width and hight. you can also play around with the view-box prop of the component.

eg:

<template>
  <div>
    <mdi-coin-icon class="my-icon" />
  </div>
</template>

<script>
 import 'mdi-vue/CoinIcon'
</script>

<style>
.my-icon {
  fill: yellow;
  width: 50px;
  height: 50px;
}
</style>

To style all the icons you need to place styles into a globally available stylesheet, but it works all the same in the end.