Reactjs – How to change color of icons in material ui

why cant I change color of search icon using sx
I tried changing the color from css using class name(searchIcon) but it does not work.

Tried this, can tell why is sx not working

import React from 'react'
import './Header.css'
import SearchIcon from '@mui/icons-material/Search';
import { grey, pink } from '@mui/material/colors';

function Header() {
  return (
    <div className='header'>
      <div className='header__left'>
        <img src="
        https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-512.png" 
        alt="" />

        <div className='header__search'>
          <SearchIcon sx={{ color: "grey[100]"}}/>
          <input type='text'/>
        </div>
      </div>
      <div className='header__right'></div>
    </div>
  )
}

export default Header