What is the best way to customize the color of the icon in the <v-text-field>?

I have a <v-toolbar> component and I am trying to customize it by adding a search text field with a search icon in front:

<v-text-field                                                                                                                                  
    solo-inverted                                                                                                                                                        
    prepend-icon="search"                                                                                                                                                
    label="Search"                                                                                                                                                       
    class="hidden-sm-and-down"                                                                                                                                           
    >                                                                                                                                                                    
</v-text-field>

While this setup works, the result is not exactly what I want:

https://i.sstatic.net/cYShR.png

The issue lies in the fact that I want both the text field and icon to be in white color. To achieve this, I tried adding the background-color="white" property to the previous code:

<v-text-field                                                                                                                                                          
    background-color="white"                                                                                                                                             
    solo-inverted                                                                                                                                                        
    prepend-icon="search"                                                                                                                                                
    label="Search"                                                                                                                                                       
    class="hidden-sm-and-down"                                                                                                                                           
    >                                                                                                                                                                    
</v-text-field>

Even though this changes the color of the text field, the icon remains unchanged:

https://i.sstatic.net/YoLiw.png

So my question is, how can I set the color of the icon to white as well?

I looked through the Vuetify.js API but couldn't find a suitable option for this customization.

cssvue.jsvuetify.js

Answer №1

Dealing with a similar issue, I decided to showcase the color-picker using Vuetify.

<v-menu
    v-model="menu"
    :close-on-content-click="false"
    transition="scale-transition"
>
    <v-text-field
       slot="activator"
       v-model="newClass.color.hex"
       label="color"
       readonly
    >
       <v-icon slot="prepend" :color="newClass.color.hex">
          format_color_fill
       </v-icon>
    </v-text-field>
    <material-picker v-model="newClass.color" />
 </v-menu>

Answer №2

To change the color of an icon, you have two options:

1. You can specify a class to override the default icon color.

2. Alternatively, you can use the v-text-field class to customize the icon color. For example:

.hidden-sm-and-down .v-icon {
    color: white !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The alignment of inline contenteditable tags is not working properly in Internet Explorer

I am facing an issue where inline contenteditable span tags are working fine in all browsers except for IE. In Internet Explorer, the tags are not acting as inline and instead aligning themselves as block elements. This behavior seems to be caused by IE wh ...

cssinternet-explorerinlinecontenteditable

Using jQuery AJAX to preload GIF images for CSS background-image loading

For some time, I have been utilizing jQuery AJAX to preload GIF images with the following code: $("#images").html("<img id='loader' src='../img/ajax-loader.gif' />"); Now, I am attempting to achieve a similar effect (such as a s ...

jqueryajaximagepreloadercss

IDGenerator Vuex

One of the challenges I'm facing is creating unique identifiers for my components. I've been considering storing a global variable in Vuex, like lastGeneratedID: 0, along with a mutation to increment this value. The current solution involves co ...

vue.jsvuex

Trouble mounting nested components in Vue.js: Component failed to mount due to undefined template or render function

I encountered an error while using Vue-CLI within the <comment> component. The issue arises when the submitComment() method of CommentForm is executed, causing the comment object to be added to selfComments for rendering. It appears that there might ...

vue.jsvuejs2vue-component

Is there a way to ensure that introjs follows the structure of slides effectively?

I created a modal that features multiple slides, each containing its own form. <v-bottom-sheet v-model="showCreateRecordModal" inset max-width="600px" class="rounded-t-xl" scrollable persistent> <v-card v-if=&quo ...

vue.jsintro.js

Retrieving Information from API using Vue.js

In the code snippet below, I am displaying data from an API for all flats on a single page. However, I am facing difficulty in showing the floor number for each flat. The JSON body is as follows: { "response": [ { "fl ...

javascriptvue.js

Change the order of the div to be placed before the previous element

In this scenario, the third div is positioned to the right of the second div rather than the first div. There is space available to the right of the first div, but it is constrained from appearing above the second div. How can I adjust the placement of th ...

htmlcss

Accessing an object from a webpage using Selenium: A step-by-step guide

Today marks my debut using Selenium IDE, and I must admit that my knowledge of web development is limited. My team is currently working on a website, and as part of my task, I need to write tests for it. The website features several charts showcasing data ...

htmlcssseleniumselenium-ide

Utilizing Vue.js global variables within a Pinia store: a step-by-step guide

I am currently working on a Vue.js 3 project where I need to utilize a global axios instance in some .vue components and also in a pinia store. Within my main.js file, I have configured axios globally like so: const axiosInstance = axios.create({ base ...

vue.jsaxiosvue-componentvuejs3pinia

Adjusting the size of tables in raw JavaScript without altering their positioning

I am attempting to adjust the size of a th element without impacting the position of the next th in the row. Specifically, I want the width of the th to influence the width of the next th accordingly, rather than pushing it to the left. Below is the code ...

javascriptcsshtmlresize

Is it possible to set the radius of a d3.js circle using a style attribute?

Learn more about styling in d3.js with this detailed guide that explains how style attributes can be leveraged to customize the look of a circle, including fill color, stroke color, and stroke width. Is it possible to adjust the radius of a d3.js circle u ...

javascriptcssd3.js

What is the best method to display a component using a string in Vue 3?

I've been attempting to render a component from a string without success. Here are my codes: <template> <div v-html="beautifyNotification(notification)"></div> </template> <script> import { Link } from '@i ...

javascriptvue.js

Prevent the utilization of <span> tags for line breaks to

When resizing my window to a smaller size, I encountered some unsightly spans that cut into new lines. To demonstrate this issue, I intentionally set the width:20px;. Can this problem be avoided? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/ ...

htmlcssbootstrap-4

Incorporate pug and sass into your React project for a more

Are pug/jade and sass compatible with react? I enjoy organizing my code by separating files, and the functionality that sass and pug provide is great for this purpose. Is there a way to integrate pug and sass into a react project? Pug example: doctype ...

javascripthtmlcssreactjspug

How come certain invisible screen elements suddenly become visible when the document is printed?

When creating a play-off tournament bracket, I face the challenge of adjusting for varying numbers of participants in each round. Typically, there are 2^n participants in each tour: 16, 8, 4, 2 which can be easily accommodated in a flex column layout. Howe ...

htmlcssprintingmaterial-ui

Applying box shadow to input group addon in Bootstrap 3 using CSS

What I am trying to achieve is that when I click on the inputbox or selectbox, the box shadow defined in my CSS should also cover the input-group-add-on feature in Bootstrap 3. The issue I'm facing is that the input-group-add-on does not display the ...

htmlcsstwitter-bootstrap-3

How does Angular5 perform with Bootstrap4?

Currently working on an Angular5 application and considering integrating bootstrap into it. I imported Bootstrap4, which includes dependencies on JQuery and Popper.js. Another option I came across is utilizing CSS grid for more versatility compared to boo ...

jqueryhtmlcsstwitter-bootstrapcss-grid

What are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Currently utilizing Bootstrap 5, my goal is to align the Navbar social icons to the left when the navbar is collapsed for small/mobile devices, and to the right when viewed on a larger screen. Can you assist in identifying which selectors need styling for ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

Center the navbar menus at the bottom

Trying to position two menus on a webpage can be challenging. One needs to show at the center bottom, while the other should appear in the top right corner. When attempting to achieve this layout, it's important to ensure that both menus are displayed ...

csstwitter-bootstrapbootstrap-4

Assigning objects in Vue.js methods

I am working on a Vue component where I need to select a specific value from an array of objects and then copy certain fields from that value into Vue data. <div class="container"> <h4>Add Item</h4> <form @submit.prevent="ad ...

javascriptvue.jsmethods