Searchbar not showing clear and cancel button


#1

Hi,
Its very strange.Searchbar not showing clear and cancel button.

   <ion-searchbar hideCancelButton="false" AvatarnavBar [(ngModel)]="searchSkill" (input)="getSkills($event)" (clear)="searchbarCleared($event)"  (cancel)="searchbarCancelled($event)" ></ion-searchbar>


Searchbar with back button issue
#2

+1

I gave same error. Button icon can not showing or something else. Here is the console output (desktop browser,chrome):

Refused to load the image ‘data:image/svg+xml;charset=utf-8,<svg%20xmlns=‘http://www.w3.org/2000/svg’%20viewBox=‘0%200%20512%20512’><path%20fill=’#5b5b5b’%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z’/>’ because it violates the following Content Security Policy directive: “default-src *”. Note that ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

(index):1 Refused to load the image ‘data:image/svg+xml;charset=utf-8,<svg%20xmlns=‘http://www.w3.org/2000/svg’%20viewBox=‘0%200%20512%20512’><polygon%20fill=’#5b5b5b’%20points='405,136.798%20375.202,107%20256,226.202%20136.798,107%20107,136.798%20226.202,256%20107,375.202%20136.798,405%20256,285.798%20375.202,405%20405,375.202%20285.798,256’/>’ because it violates the following Content Security Policy directive: “default-src *”. Note that ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback.


#3

https://forum.ionicframework.com/t/refuse-to-load-the-image-svg-issue-with-search-bar-icons/47234/2?u=bea


#4

Were you able to solve the searchbar issue?


#5

i just added color='primary' to the toolbar if the searchbar is inside the toolbar and works like a charm :slight_smile: