Icon size and apperance

Dashboard
1

Hello,
i am trying to do my first steps with dashboard 2.0.
I need different icons shown with different inputs.
All i could find are icons with switches or buttons.
Next thing is to change the size of the icons.

Thx in advance
Olmuk

2

What dashboard widgets do you want to use icons with?
Do you need the icon size to change dynamically or do you just want to change the default size?

3

You will probably have to think about jbudds' question but here is a simple example of an icon. If you change iconLarge to iconSmall the size and position of the icon will change. (the icon is just displayed in the Group backdrop)

<template>
    <div class="iconLarge">
        <span class="mdi mdi-weather-sunny"></span>
    </div>
</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {

            }
        },
        watch: {
            // watch for any changes of "count"
 
        },
        computed: {
            // automatically compute this variable
            // whenever VueJS deems appropriate
 
        },
        methods: {
            // expose a method to our <template> and Vue Application

        },
        mounted() {
            // code here when the component is first loaded
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>
<style>
    /* define any styles here - supports raw CSS */
    .iconLarge {
        font-size: 100px;
        justify-content: right;
        align-items: center;
        text-align: center;
    }

	.iconSmall {
		font-size: 45px;

	}
</style>
4

Thanks for your answers.
That is my problem because i don‘t really know where to put im the code.
I guess the template ?
Is it possible to show me that with the flows ?

5

Nowadays in Dashboard 2 im using VUE features, you can use their website even for live-testing of your code in their Vue-Playground. It helped me a lot to learn the capabilites of Node-red ui-Templates.

you will not need a flow to test the in Node-Red.... just an UI-Template and copy-paste the code.... there are good examples/demos in the Node-Red-Tutorials