How to set a custom icon for ion-select in Ionic 4

I would like to assign a unique icon to my ion-select element. Below is the code I am using and the resulting output:

<ion-item class="input-container" align-items-center no-padding>
  <ion-label position="floating" no-margin no-padding>I am a</ion-label>
  <ion-select formControlName="role" mode="ios" okText="Okay" cancelText="Cancel">
    <ion-select-option value="Admin">Admin</ion-select-option>
    <ion-select-option value="Customer">Customer</ion-select-option>
  </ion-select>
  <ion-icon color="primary" name="arrow-down" mode="ios" slot="end"></ion-icon>
</ion-item>

https://i.sstatic.net/2fdhZ.png

Are there any alternative methods for setting custom icons, or does anyone have suggestions on how to remove select-icon-inner?

javascriptcssangularionic-frameworkionic4

Answer №1

If you want to customize the icon part, you can easily do so by using the following code snippet:

ion-select::part(icon) {
  content: url('your-custom-icon-path/custom-icon.svg');
}

👉 Check out this demo for a live example.

Answer №2

One way to hide the icon in Ionic v4 is by using the .scss file.

ion-select::part(icon) {
  display: none !important;
}

ion-select::part(text) {
  background-image: url(<ImageUrl>);
  background-position: right;
  background-repeat: no-repeat; 
}

Answer №3

Here is a solution that I found helpful in my experience with i5:

ion-select::part(icon) {
  opacity: 1;
  margin-left: 1em;
  color: transparent;
  background: url('assets/icons/light-mode/expand-down.svg') no-repeat center;
}

Answer №4

While not the most ideal fix, this approach can address the issue at hand. To implement this workaround, add the following style in your .scss file -

ion-select {
  min-width: 100%;
}

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

Replace the pixel measurements with percentage values

I have a vision for creating a dynamic full-width slider using a flex-wrapper and multiple child sections. Each section spans the width of the viewport and is aligned in a row. The goal is to move the flex-wrapper by 100% margin-left every time a button ...

jquerycss

A guide on how to select all child checkboxes when the main checkbox is checked in a React application

I am looking to achieve a dynamic check of the children's checkboxes when the main checkbox is checked, specifically using ReactJS. I have come across solutions on Stackoverflow that involve JQuery, but I want to implement this functionality in ReactJ ...

javascripthtmlreactjscheckbox

Load certain database information into memory as Express initializes

Are there any efficient methods for storing data in Express? For instance, I am interested in preloading all API keys from a PostgreSQL database into memory when the server is initialized to avoid having to query the database for each API request. I consi ...

javascriptnode.jsexpress

Preventing duplicate components from being rendered by using onClick in

Recently, I started learning React and decided to build a registration form. I want to make it possible for users to add an extra person to the registration by simply clicking a button. The "person" component contains all the necessary form fields, and w ...

javascriptreactjsjsxredux-toolkit

Asynchronously retrieving results in MongoDB

My task involves fetching all users from the users collection. app.post('/login', function(req,res,next){ users = self._db.get('users', {}) }) Below is the function in my database class: this.get = function( col, opt ) { ...

javascriptnode.jsmongodbasynchronousexpress

Conundrum regarding setting up configuration for express-session middleware in Express version 4.x

Hello, I'm currently diving into node.js and still trying to grasp the concept of configurations in sessions. Below is a basic example of how sessions are used in my app: app.js var express = require('express'); var bodyParser = require(&a ...

javascriptnode.jssessionexpress

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

Is there a way to show or hide a div based on a checkbox click? I've got it working in jsFiddle, but for some reason, it's not functioning properly on my website. Any thoughts on how to fix this? My goal is to offer multiple payment methods (cre ...

javascriptjqueryhtmlcss

Guide to importing a JSON file into Vue.js and HTML

I'm a beginner in Vue and not very familiar with HTML I'm attempting to import data from a JSON file into my interface to display it for the user. Below is the structure of the JSON: [ { "Title": "SOFT-STARTER", "Cod&q ...

javascripthtmljsonvue.jsvuejs3

Guidelines for ensuring that a radio button must be chosen prior to submission

I'm struggling with implementing AngularJS validation for a set of questions with radio answer choices. I want to ensure that the user selects an answer before moving on to the next question by clicking "Next". Check out my code below: EDIT: Please k ...

javascripthtmlangularjsangularjs-scopeangularjs-ng-disabled

Retrieve the attribute of object i using Javascript

Despite my efforts, I have not been able to achieve success. Is there a way for me to dynamically access the value i.MoveTo in order to apply logic directly to that specific value? I have an array of objects similar to the following structure, with proper ...

javascriptnode.jsobjectvue.js

Why was the 'Symbol' type introduced in ECMA-262-v6 and what purpose does it serve?

Can you explain the purpose of the 'Symbol' type in ECMA-262-v6? Is it used for fast path implementation for object keys? How does it work internally - does it hash with the assurance that the underlying data remains unchanged? ...

javascriptsymbolsecmascript-6

Changing a collection of values in an object into a designated array shape

I have an object with the following values: const data = { "generalInfo": [{ "title": "title1", "permalink": "www.link.com", "manufacturer": "manufacturer1", "category": [{ "term_id": 3 ...

javascriptarrays

Having trouble getting the height to work properly on your Blogger Blogspot template?

Issue with embed height=100% not working <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> & ...

htmlcsstemplatesheightblogger

The error message states that `article.createdAt.toLocalDateString` is not a valid

const mongoose = require("mongoose"); const blogPostSchema = new mongoose.Schema({ title: String, image: String, description: String, createdAt: { type : Date, default : new Date() } }); const blogPos ...

javascriptnode.jsexpressdate

How to dynamically change the content of the <header> in Nextjs depending on the loaded component

I recently finished creating a app/components/Header.js component. export function Header() { return <> <header className="w-full h-14 grid grid-cols-12 bg-gray-50 text-black dark:bg-gray-900 dark:text-white"> <div ...

javascriptreactjsnext.jsnext.js13

NestJS WebSocketGateway fails to initialize due to a technical glitch

After following the instructions in the NestJS documentation, I set up the websockets gateway within the AppModule. The server is starting without any issues, and I'm able to serve static assets via HTTP successfully. However, I'm facing difficul ...

javascriptnode.jstypescriptwebsocketnestjs

How to efficiently switch between classes in Ember Octane using Handlebars?

What is the best way to toggle between displaying a class on and off using Ember.js Octane? Should I use an @action or @tracked in this case? <img src="flower.jpg" alt="flower" class="display-on"> or <img src="flower.jpg" alt="flower" class=" ...

javascriptnode.jsember.jsfrontendember-octane

Oops! Gulp encountered an error: Assertion Error [ERR_ASSERTION]: You must specify a task function

Being new to javascript, I attempted to execute some repositories from GitHub. After installing all the required updates and running npm audit --force, I am still encountering this error. Any assistance would be greatly appreciated. Error Code : PS D:&bso ...

javascriptsassgulp

How can I change an icon and switch themes using onClick in react js?

I have successfully implemented an icon click feature to change the colorscheme of my website (in line 21 and changeTheme). However, I also want the icon to toggle between FaRegMoon and FaRegSun when clicked (switching from FaRegMoon to FaRegSun and vice v ...

javascriptreactjstypescript

Problem with using Jquery DIY slider for multiple purposes

There seems to be an issue with the DIY Slider that I'm using. Whenever I attempt to use this slider more than once on a single page, the second one fails to function. I have exhausted all possible solutions that come to mind. $(".slider").diyslider ...

jqueryhtmlcssslider