'Why is my css not working on v-checkbox's icon?

I have two icons and I'm trying to customize them

<v-checbkox icon class="icons" off-icon="mdi-close" on-icon="mdi-mark"></v-checkbox>

I want something like this :

enter image description here

And actually I have this :

enter image description here

I tried this (got it from css dev mode of the first icon) :

.icons {
    background-color: red;
    color:green !important;
    font-weight: 200;
    border-radius: 2px;
}

And the font-weight doesn't change, the color don't change the icon but the hover color and the background color is a (way) too big square.

What I am doing wrong?

Update

Background-color gaves me this :

enter image description here

Ok this almost worked :

    <v-checkbox
      v-model="answer.correct"
      on-icon="mdi-check"
      off-icon="mdi-close"
      color="white"
      style="border-radius:6px; width:40px; height:40px"
      :class="{ 'success': answer.correct, 'red': !answer.correct}"
      class="answer-toggle icons mr-3 pl-2 pt-2"
    ></v-checkbox>

enter image description here

But the white only works for mdi-check not mdi-close

How can I give it the same condition as the class and make the icon larger.

javascriptcssvue.jsvuetify.js


Solution 1:[1]

It seems to change color & background-color, you should use the corresponding v-checkbox props.

https://vuetifyjs.com/en/api/v-checkbox/#props

Solution 2:[2]

As per the Vuetify docs you can change the checkbox's appearance by settings its props like the following (I've used the colour picker to match your example)

<v-checkbox
    v-model="your-model"
    label="success"
    color="#377d22"
    value="success"
    hide-details
></v-checkbox>

Solution 3:[3]

You probably already solved this, but gonna answer here in case this can help anyone. Instead of using the 'mdi-check' and 'mdi-close' you should be using:

<v-checkbox
  v-model="answer.correct"
  on-icon="mdi-checkbox-marked"
  off-icon="mdi-close-box"
  :color="answer.correct ? 'green' : 'red'"
></v-checkbox>

These icons already have the box, so you don't have to create a box around your icons. And set the color according to you logic. For more icons: https://materialdesignicons.com/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nice Books
Solution 2
Solution 3 Danilo Magdaleno

Related Questions