<div>
      <button id="icon16">検索</button>
      <button id="icon18">検索</button>
      <button id="icon20">検索</button>
    </div>

[id^="icon"] {
  position: relative;
  padding:0.5rem 1rem 0.5rem 2rem;/* アイコン（左）側の余白はfontsizeの2倍 */
  font-weight: bold;
  color: #ffffff;
  background: #333333;
  border: 2px solid #333333;
  border-radius: 4px;
}
[id^="icon"]:hover {
  color: #333333;
  background: #ffffff;
  transition: .5s;
}
[id^="icon"]:hover::before{
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(6671%) hue-rotate(169deg) brightness(96%) contrast(61%);
  transition: .5s;
}
#icon16{
  font-size: 16px;
}
#icon16::before{
  position: absolute;
  top: 10px;/* fontsizeの2/3 */
  left: 8px;/* fontsizeの1/2 */
  width: 16px;/* fontsizeと同じ */
  height: 16px;/* fontsizeと同じ */
  content: "";
  background: url('https://raw.githubusercontent.com/saru-no-okiba/materials/refs/heads/main/icon-magnifier.png')no-repeat;
  background-size: contain;
}
#icon18{
  font-size: 18px;
}
#icon18::before{
  position: absolute;
  top: 12px;/* fontsizeの2/3 */
  left: 9px;/* fontsizeの1/2 */
  width: 18px;/* fontsizeと同じ */
  height: 18px;/* fontsizeと同じ */
  content: "";
  background: url('https://raw.githubusercontent.com/saru-no-okiba/materials/refs/heads/main/icon-magnifier.png')no-repeat;
  background-size: contain;
}
#icon20{
  font-size: 20px;
}
#icon20::before{
  position: absolute;
  top: 14px;/* fontsizeの2/3 */
  left: 10px;/* fontsizeの1/2 */
  width: 20px;/* fontsizeと同じ */
  height: 20px;/* fontsizeと同じ */
  content: "";
  background: url('https://raw.githubusercontent.com/saru-no-okiba/materials/refs/heads/main/icon-magnifier.png')no-repeat;
  background-size: contain;
}