I'm trying to implement ion-searchbar
in my Ionic 4 app.
<ion-toolbar mode="ios">
<ion-grid>
<ion-row>
<ion-searchbar></ion-searchbar>
</ion-row>
</ion-grid>
</ion-toolbar>
but, it throws below error in the browser console. I was not able to display clear text icon in the searchbar.
Cannot find "/dist/ionicons/svg/ios-close-circle.svg" in ionicons@5.0.0
Please note I have these two script files in the index.html
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
Could anyone please help.
With Ionic 4, you can access Ionicons without including the script references. It should also be noted that with the release of Ionic 5, Ionicons styling received an upgrade and previous references to md
or ios
styling have been removed in favor of three distinct style choices for each icon (outline
, filled
, and sharp
).
With the ion-searchbar
component, the clear-icon
property automatically defaults to the close-circle
icon, but you can change this by setting the clear-icon
attribute:
<ion-searchbar clear-icon="close-sharp"></ion-searchbar>
For reference, if you want to include an icon separately of the ion-searchbar
, you can do it like so:
<ion-icon name="close-circle-outline"></ion-icon>
where the outline
portion of the name can be replaced with either filled
or sharp
depending on your style preference. Here's the list of all updated icons and their names: https://ionicons.com/