プレアクト/反応アプリでGoogle材料アイコンを使用

Question

私はプレアクトアプリケーションを構築しています。どこでは、私はmaterial-components-webを使います。 私はこの

<i class="material-icons" aria-hidden="true">home</i> 

ようなアイコンをレンダリングする場合は、罰金と表示ホームアイコンを動作します。

しかし、私は、変数としてこのようなものhomeを入れたい何らかの理由がある：

let homeIcon = 'home'; 
<i class="material-icons" aria-hidden="true">{homeIcon}</i> 

はそのように行う方法はありますか？あなたはこれらの変異体のいずれかを使用して材料のアイコンを使用することができます

Answer 1

おかげで、： <i class="material-icons">face</i> と <i class="material-icons">&#xE87C;</i>

は、私はhomeを示す合字へのあなたの変数doesntの転送は、代わりだと思います。 const iconHome = <i class="material-icons" aria-hidden="true">home</i>;のような操作を行うか、数値のchar参照を使用してください。

この例では、ligaturesという文字体裁の機能を使用しています。この機能では、文字の名前を使用するだけでアイコンの字形を表示できます。置換えはWebブラウザによって自動的に行われ、同等の数字の文字参照よりも読みやすいコードを提供します。参考のためにpreact-material

： はまた、あなたはpreactのための材料、部品の上に特殊な薄いラッパーを確認したいMaterial Icons