CODEWITHSUNDEEP
reactjsjsxstyled-components
rediet yosef
rediet yosef

Reputation: 222

how can i add an icon to HTML nested in JS

I am trying to insert an icon into JSX. I have already imported the icon, but i have no idea on how to add it to the code.

import React, { useState, Fragment } from "react";
import styled from "styled-components";
import * as materialOutlined from '@styled-icons/material-outlined'
import {Search} from '@styled-icons/material'

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <Nav>
      <Logo>
        <img href="/" width="70%" height="70%" src="../static/images/telsem.png"/>
      </Logo>
      <SearchP>
        <input class="search" type="text" id="search" placeholder="Search for...." />
            <button type="submit">Search</button>
      </SearchP>
      </Nav>
  );
};

"<button type="submit">Search</button>"  i want to change the Name Search into an icon

Upvotes: 0

Views: 40

Answers (1)

josepdecid
josepdecid

Reputation: 1847

You have already imported the Search icon from styled-components. You just have to render it in the JSX code by typing it between curly braces, which evaluates JS code.

<button type="submit">{<Search/>}</button>

As it is a component, you render it as <Search/> and not only Search.

Upvotes: 1

Related Questions