<template>
    <span style="display: inline-flex;align-items: center;vertical-align: middle;">
        <i class="mdi mx-1"
           :class="getclasses"></i>
        <slot></slot>
    </span>
</template>

<script>
export default {
    props: {
        size: {
            type: Number,
            default: 24
        },
        value: {
            type: String,
            default: ''
        },
    },
    computed: {
        getclasses() {
            return [this.geticon, this.getsize];
        },
        getsize() {
            return `mdi-${this.size}px`;
        },
        geticon() {
            if (this.value === undefined || this.value === null) {
                return '';
            }
            if (this.value.startsWith('mdi-')) {
                return this.value;
            }
            return `mdi-${this.value}`;
        }
    }
}
</script>