各アイコンを、コンテナに包まれた単独のIconウィジェットに変換するのではなく、コンバーターはブロックの構造を認識し、経験豊富なElementorユーザーなら選ぶウィジェットを選択します。
パターン1 — Icon Box
見出しが1つ、段落が1つ、アイコンが1つ以上だけを含み、他のコンテンツ要素（画像、ボタン、リスト、テーブル、フォーム）がないコンテナは、単一のIcon Boxウィジェットに変換されます。
引き継がれるのは、アイコン自体、タイトルと説明テキスト、見出しレベル、テキストの配置、アイコンサイズ、アイコンとタイトルの間隔、タイトル下の余白、そしてタイトルと説明の両方のタイポグラフィと色です。カード自体の外枠（背景、枠線、角丸、影、パディング）はウィジェットの高度な設定に書き込まれるため、余分なラッパーコンテナは作成されません。
パターン2 — Icon List
子要素が2つ以上の繰り返し行で、各行にアイコン1つとテキストのみを含む（見出し、画像、ボタンはない）コンテナは、1つのIcon Listウィジェットになり、行ごとに1つの編集可能な項目が作成されます。
細かいポイントとして、すべての行が同じ元のアイコン（典型的なチェックマークのリスト）を使用している場合、テキストから行ごとに別のアイコンを推測するのではなく、全行に対して1つのアイコンが選択されます。認識できないチェックマークは fa-check にフォールバックされます。行間の余白、アイコンサイズ、アイコンの色、テキストの色、テキストのタイポグラフィもすべて引き継がれます。
パターン3 — 単独のIcon
それ以外でアイコンだけのものはIconウィジェットになり、元の要素からサイズと色が設定されます。
Elementorのアイコンライブラリにアイコンを取り込む
Icons オプションを Match Elementor icon library に設定します。すると：
- マークアップがすでにFont Awesomeのクラス（
<i class="fas fa-shield-alt">）を使用している場合、そのアイコンがそのまま使用されます。 - 名前のないインラインの
<svg>の場合、コンバーターは意味に基づいて照合します。アイコンのclass、aria-label、title、カードの見出しテキストを、キーワードテーブル（shield → shield、recycle/reusable → recycle、water/clean → tint など）と照合します。 - 何も一致しない場合、アイコンコントロールは意図的に空のままにされます。誤った推測を受け取るのではなく、Elementorのアイコンピッカーから選べるようにするためです。
インラインSVGを避けるべき理由
手書きのインラインSVGはElementorのアイコンコントロールに配置できません。さらに悪いことに、サイズとストロークをページのCSSに依存していたSVG（例：width:22px; stroke:currentColor; fill:none）は、ページから取り出されるとそのCSSを失い、デフォルトサイズで黒い塗りつぶしで描画される可能性があります。これは「小さなチェックマークが巨大な黒い図形になった」という典型的な症状です。
これを避ける方法は2つあります。ソースでFont Awesomeのクラスを使用するか、Icon List / Icon Boxの検出によってSVGを実際のライブラリアイコンに置き換えるかです。一致せずHTMLとして残るインラインSVGは、少なくとも描画時のサイズで出力されるため、巨大化することはありません。