Bug: Input icon prop is not working

[sarathkumarps17]

React version: 16.8.0

Steps To Reproduce

1. Add Input component with icon prop
2. Test the component

Link to code example: https://codesandbox.io/p/sandbox/semantic-ui-react-forked-nntj3g?file=%2Findex.js

The current behavior: Not showing icons in the input field

The expected behavior: Should show icons based on icon prop

[atalayio]

This is actually not react situation, you need the import Semantic UI CSS. here for you;

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
  "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

If you put in this to your code, you'll be fine.

Want more detail, don't forget to check Semantic UI CSS documentation: https://react.semantic-ui.com/elements/input/#variations-icon

[rickhanlonii]

@atalayio is correct, you can also add this to index.html:

<link
  async
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css"
/>

Or import it in JS via:

import 'semantic-ui-css/semantic.min.css'

Here's a working sandbox with the HTML version: https://codesandbox.io/p/sandbox/semantic-ui-react-forked-y2h8yf

And here are the Semantic UI installation docs: https://react.semantic-ui.com/usage#install