ng-select change dropdown arrow using image url

Question

I am trying to use an image in assets folder to change the ng-select dropdown arrow.

there are references to make use of font-awesome like below - which is working

.ng-select .ng-arrow-wrapper .ng-arrow {
    display: none;
}

.ng-select span.ng-arrow-wrapper:before {
    content: "\f0ab";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
}

However, I am trying something like below to achieve it:

.ng-select ::ng-deep .ng-arrow {
  display: none;
}
.ng-select ::ng-deep .ng-arrow-wrapper {
  height: 14px;
  width: 14px;
  background-image: url('../assets/arrowhead-down.svg');
  background-repeat: no-repeat;
  margin-right: 12px;
  margin-left: 10px;
  margin-top: 5px;
}
.ng-select-opened ::ng-deep .ng-arrow-wrapper {
  background-image: url('../assets/arrowhead-down.svg');
}

However, this isn't rendering the assets image. Appreciate any inputs.

^^ this is the image caret I am using for dropdown arrow

The problem for me here is not the usage of assets. I am trying to get the background image url work (it could be any url). The reason being I am using angular elements where one of the element will be using this ng-select. Since, these elements will be part of a javascript import, I cannot have it as part of assets. So, I am trying to make use of background image from our hosted CDN. However, I am unable to get the image to show up in the dropdown

Thanks, Ani

user_5495863 · Answer

I understand what the OP wanted to do here is the answer - I tried it and it works.

.ng-select .ng-arrow-wrapper .ng-arrow {
  border-color: none !important;
  border-style: none !important;
  border-width: 0 !important;
}
.ng-select .ng-arrow-wrapper {
  background-image: url('/assets/img/arrowhead-down.svg');
  background-repeat: no-repeat;
  background-size: 14px 14px;
  margin-top: 2px;
}

originally I had posted a different answer but I understood what the issue was - however, the assets path should always be preceded by a / at the root. You did not need to use ng-deep.

user_17612865 · Answer

I changed arrow icon with icon font and add rotation animation on close/open

.ng-select {
     .ng-arrow {
         font-family: "icomoon" !important;
         border-color: inherit !important;
         border-width: 0 !important;
         font-size: 16px;
         top: 0 !important;
         left: -3px;
         color: inherit;
         text-align: center;
         transform: rotate(0deg);
         transform-origin: 8px 12px;
         transition: transform 0.2s ease;
         &:before {
             content: "\e60f";
         }
   }

   &.ng-select-opened {
       .ng-arrow {
           transform: rotate(180deg);
       }
   }
}

ng-select change dropdown arrow using image url

2 Answers