ion-searchbar in Ionic 4 throws icons not found errors on browser console

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 [email protected]

Please note I have these two script files in the index.html

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>

Could anyone please help.

Solution

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/