리엑트 Mui의 TextField에 아이콘넣기 , Button에 아이콘넣기

TextField에 아이콘을 넣어야했는데, 구글링을 통해 알게 된 방법을 정리해두자!

 

 

먼저, 원하는 아이콘과 InputAdornment 를 import해준다.

 

 

import {Stack,Typography,Box,Button,TextField,InputAdornment} from '@mui/material'

import GpsFixedIcon from '@mui/icons-material/GpsFixed';

import LocationOnIcon from '@mui/icons-material/LocationOn';

 

 

아이콘

 

내가 선택한 아이콘!

 

 

 

 

그리고 이 아이콘을 적용하기위해서,

 

<TextField type="text" placeholder="동명(읍,면)으로 검색 (ex. 서초동)" sx={{ backgroundColor:"#F5F5F5", width:500}}

    InputProps={{

         startAdornment: (

           <InputAdornment position='start'>

              <LocationOnIcon sx={{color:'#FF7474'}}/>

           </InputAdornment>

           ),

         }}

      />

 

 

ImputProps는 Mui에서 제공해주는 TextField 컴포넌트의 속성 중 하나이며,

이 속성은 TextField 컴포넌트 내부에 입력 필드에 대한 커스터마이징이 가능하게 해준다!

startAdornment에 위치한 아이콘은 텍스트필드에 앞쪽에 위치하게된다! 

 

생각보다 금방해결 할 수 있는 문제였다

 

 

결과물

 

 

Button에 아이콘넣기!

 

정말 무안하게도 너무쉽다!

 

<Button startIcon={<GpsFixedIcon/>} sx={{color:'white', backgroundColor:'#FF7474', width:500,mt:2}}>현재위치로 찾기</Button>

 

만들어놓은 버튼태그에 startIcon = {<mui에서 원하는아이콘/>} 만 해주면 된다!

 

 

 

나중에 까먹을수도 있으니 쉽다고 방심하지말고 기록해두자.