@ui5 web components: Adding icon inside ui5-input does not work

Question

Just trying the Input as Search Field example (you'll need to scroll down a little bit), but displaying the icon does not work for me.

<ui5-input id="searchInput" placeholder="Enter search criteria ..." style="width: 100%">
    <ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
</ui5-input>

When I move the ui5-icon out of the ui5-input, the icon is displayed, but outside the input box. But doing it the way it is shon in the example (including style and script) show no icon at all.

Does anybody know, what I might do wrong?

This is what I included in the JavaScript bundle. It's nearly all that was available. So I hope I didn't miss anything.

In the attached image I can see that the is hidden in the upper right corner of the ui5-input (dotted cross). Maybe I need to include some more css?

import './style.css'

import '@vaadin/app-layout' // don't use, full screen layout only
import '@vaadin/button'
import '@vaadin/icon'
import '@vaadin/icons'
import '@vaadin/menu-bar'  // don't know how to use it
import '@vaadin/scroller'
import '@vaadin/split-layout'

import "@ui5/webcomponents/dist/avatar.js";
import "@ui5/webcomponents/dist/avatargroup.js";
import "@ui5/webcomponents/dist/badge.js";
import "@ui5/webcomponents-fiori/dist/bar.js";
import "@ui5/webcomponents-fiori/dist/barcodescannerdialog.js";
import "@ui5/webcomponents/dist/breadcrumbs.js";
import "@ui5/webcomponents/dist/busyindicator.js";
import "@ui5/webcomponents/dist/button.js";
import "@ui5/webcomponents/dist/calendar.js";
import "@ui5/webcomponents-base/dist/features/F6Navigation.js"
import "@ui5/webcomponents/dist/Card";
import "@ui5/webcomponents/dist/CardHeader.js";
import "@ui5/webcomponents/dist/carousel.js";
import "@ui5/webcomponents/dist/checkbox.js";
import "@ui5/webcomponents/dist/colorpalette.js";
import "@ui5/webcomponents/dist/colorpicker.js";
import "@ui5/webcomponents/dist/combobox.js";
import "@ui5/webcomponents/dist/datepicker.js";
import "@ui5/webcomponents/dist/daterangepicker.js";
import "@ui5/webcomponents/dist/datetimepicker.js";
import "@ui5/webcomponents/dist/dialog.js";
import "@ui5/webcomponents-fiori/dist/dynamicsidecontent.js";
import "@ui5/webcomponents/dist/fileuploader.js";
import "@ui5/webcomponents-fiori/dist/flexiblecolumnlayout.js";
import "@ui5/webcomponents/dist/icon.js";
import "@ui5/webcomponents-fiori/dist/illustratedmessage.js";
import "@ui5/webcomponents/dist/input.js";
import "@ui5/webcomponents/dist/features/InputSuggestions.js";
import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
import "@ui5/webcomponents/dist/label.js";
import "@ui5/webcomponents/dist/link.js";
import "@ui5/webcomponents/dist/List.js";
import "@ui5/webcomponents/dist/StandardListItem.js";
import "@ui5/webcomponents/dist/CustomListItem.js";
import "@ui5/webcomponents/dist/GroupHeaderListItem.js"; 
import "@ui5/webcomponents-fiori/dist/MediaGallery";
import "@ui5/webcomponents-fiori/dist/MediaGalleryItem";
import "@ui5/webcomponents/dist/menu.js";
import "@ui5/webcomponents/dist/messagestrip.js";
import "@ui5/webcomponents/dist/multicombobox.js";
import "@ui5/webcomponents/dist/multiinput.js";
import "@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js";
import "@ui5/webcomponents-fiori/dist/NotificationAction.js";
import "@ui5/webcomponents-fiori/dist/NotificationListItem.js";
import "@ui5/webcomponents-fiori/dist/page.js";
import "@ui5/webcomponents/dist/panel.js";
import "@ui5/webcomponents/dist/popover.js";
import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";
import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";
import "@ui5/webcomponents/dist/progressindicator.js";
import "@ui5/webcomponents/dist/radiobutton.js";
import "@ui5/webcomponents/dist/rangeslider.js";
import "@ui5/webcomponents/dist/ratingindicator.js";
import "@ui5/webcomponents/dist/responsivepopover.js";
import "@ui5/webcomponents/dist/segmentedbutton.js";
import "@ui5/webcomponents/dist/Select";
import "@ui5/webcomponents/dist/Option";
import "@ui5/webcomponents-fiori/dist/shellbar.js";
import "@ui5/webcomponents-fiori/dist/SideNavigation.js";
import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
import "@ui5/webcomponents/dist/slider.js";
import "@ui5/webcomponents/dist/splitbutton.js";
import "@ui5/webcomponents/dist/stepinput.js";
import "@ui5/webcomponents/dist/switch.js";
import "@ui5/webcomponents/dist/TabContainer";
import "@ui5/webcomponents/dist/Tab";
import "@ui5/webcomponents/dist/TabSeparator";
import "@ui5/webcomponents/dist/Table.js";
import "@ui5/webcomponents/dist/TableColumn.js";
import "@ui5/webcomponents/dist/TableRow.js";
import "@ui5/webcomponents/dist/TableCell.js";
import "@ui5/webcomponents/dist/textarea.js";
import "@ui5/webcomponents/dist/timepicker.js";
import "@ui5/webcomponents-fiori/dist/timeline.js";
import "@ui5/webcomponents/dist/title.js";
import "@ui5/webcomponents/dist/toast.js";
import "@ui5/webcomponents/dist/togglebutton.js";
import "@ui5/webcomponents/dist/Tree.js";
import "@ui5/webcomponents/dist/TreeItem.js";
import "@ui5/webcomponents-fiori/dist/UploadCollection.js";
import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";
import "@ui5/webcomponents-fiori/dist/viewsettingsdialog.js";
import "@ui5/webcomponents-fiori/dist/wizard.js";

import "@ui5/webcomponents-icons/dist/AllIcons.js"
import "@ui5/webcomponents-icons-tnt/dist/AllIcons.js";
import "@ui5/webcomponents-icons-business-suite/dist/AllIcons.js";

---

I'm using it in a ASPnet project. I found out that the problem only occures, when Bootstrap is included. When I comment out Bootstrap, the icon (magnifying glass) is displayed.

Do Bootstrap and (ui5) Web Components interfere with each other?

Answer 1

I encountered the same problem, and I opened a ticket on github for fixing ui5-input https://github.com/SAP/ui5-webcomponents/issues/6071

Waiting for a real fix, I got a satisfactory answer, just add 3 lines to your css code:

ui5-icon {
  box-sizing: content-box;
}

to make it look nicer i added this

ui5-icon {
    box-sizing: content-box;
    border-left: 1px solid #89919A;
}

ui5-icon:hover {
    cursor: pointer;
    color: #861645;
}