Zenn
🔍

Material Icons をinputのplaceholderに設定する方法

2023/05/22に公開
input
placeholder
materialicon
tech

記事の概要

フォームやテキストによる検索などに使用する、input type='text'において、placeholderに文字列ではなくアイコンを表示したいケースがあり、Google提供のMaterial Iconsで実現する方法を備忘録としてまとめました。
例：　左端の虫眼鏡アイコンがplaceholder
例：　左端の虫眼鏡アイコンがplaceholder

https://fonts.google.com/icons

補足

  • Material Icons Outlinedを使用
  • 前提としている環境はReact Typescript, TailwindCSS（今回は登場しません）ですが、HTML/CSSにおいても同様に使用可能（のはず）です

方法

  1. index.cssにplaceholderのスタイルを書く（細かなところはお好みで）
input::-webkit-input-placeholder {
  font-family: 'Material Icons Outlined';
  font-size: 24px;
  position: absolute;
  top: 10px;
}

input::-moz-placeholder {
  font-family: 'Material Icons Outlined';
  font-size: 24px;
  position: absolute;
  top: 10px;
}

input:-ms-input-placeholder {
  font-family: 'Material Icons Outlined';
  font-size: 24px;
  position: absolute;
  top: 10px;
}

input:-moz-placeholder {
  font-family: 'Material Icons Outlined';
  font-size: 24px;
  position: absolute;
  top: 10px;
}
  1. app.tsxなどに下記のリンクを入れておく
<link href='https://fonts.googleapis.com/icon?family=Material+Icons+Outlined'
rel='stylesheet'></link>
  1. inputのplaceholderの内容はspanと同様（今回は検索窓のため'search'）
<input 
  type='text'
  placeholder='search'
  value={searchPhrase}
  onChange={(event) => setSearchPhrase(event.target.value)}
  className='rounded-full'
/>

Discussion