画面のアイコン（jQuery UI・Material Symbols・SVG）
プリザンターの画面のアイコンは 3 種類の仕組みが混ざっています。スクリプトでボタンを足すときやスタイルでアイコンを変えるときは、どの仕組みのアイコンかを見て同じものを使うと、画面になじみます。Font Awesome は使われていません。アイコンのファイルはすべてプリザンター自身が配信し、CDN は使いません。
| 仕組み | 使われている場所 | 書き方 | ファイル |
|---|---|---|---|
| jQuery UI のアイコン | ボタン・ツールバーなど従来からの画面の大半 | <span class="ui-icon ui-icon-disk"> | テーマごとの images/ui-icons_*.png（スプライト画像） |
| Material Symbols | エディタの項目設定、Markdown エディタ、ダッシュボードのクイックアクセス、Svelte のコンポーネントなど新しい部品 | <span class="material-symbols-outlined">content_copy</span> | assets/plugins/material-symbols/（Web フォント） |
| SVG ファイル | v2 テーマのナビゲーションメニュー、サイト種別のアイコン | <img src="…/images/icon-menu-new.svg"> | wwwroot/images/ |
jQuery UI のアイコン
jQuery UI 1.13.2（2023-01-20）のアイコンです。ui-icon と ui-icon-{名前} の 2 つのクラスを付けた要素に、テーマのスプライト画像の一部が背景として表示されます。
サーバー側では HtmlControls.Icon() がこの span を出し（HtmlControls.cs#L803）、コマンドボタンは icon: "ui-icon-disk" のように名前を渡して付けます。
1.5.8.1 の C# のソースで使われているのは 52 種類です。多い順に並べると次のとおりです。
| アイコン | 使い道 |
|---|---|
ui-icon-circle-check | 確定・OK |
ui-icon-disk | 保存・更新 |
ui-icon-cancel | キャンセル |
ui-icon-gear | 設定・詳細 |
ui-icon-trash | 削除 |
ui-icon-circle-triangle-s / -n / -w / -e | 下・上・左・右への移動 |
ui-icon-copy | コピー |
ui-icon-search | 検索 |
ui-icon-person | ユーザー |
ui-icon-close | 閉じる |
ui-icon-arrowreturnthick-1-w | 戻る |
ui-icon-pencil | 編集 |
ui-icon-plus | 追加 |
ui-icon-refresh | 再読み込み |
C# で使われている 52 種類の一覧
arrowrefresh-1-s・arrowreturnthick-1-e・arrowreturnthick-1-n・arrowreturnthick-1-w・arrowthickstop-1-n・arrowthickstop-1-s・calendar・cancel・check・circle-arrow-n・circle-arrow-w・circle-check・circle-close・circle-triangle-e・circle-triangle-n・circle-triangle-s・circle-triangle-w・circle-zoomin・clock・close・closethick・contact・copy・Crosstab・disk・extlink・folder-open・gear・image・info・key・link・mail-closed・minusthick・notice・pencil・person・play・plus・plusthick・power・refresh・search・seek-next・seek-prev・transferthick-e-w・trash・triangle-1-e・triangle-1-n・triangle-1-s・unlocked・video（いずれも先頭に ui-icon- が付く）
ui-icon-Crosstab（クロス集計の「今月」ボタン）は jQuery UI のアイコンではなく、フロントエンドの CSS にも定義がありません。
コマンドボタンは、サーバーが <button class="button button-icon …" data-icon="ui-icon-disk"> を出し、ブラウザ側の $p.apply() が .button-icon:not(.applied) のボタンに jQuery UI の button({ icon: data-icon }) を適用してアイコンを付けます（HtmlControls.cs#L755-L790、jqueryui.js#L28-L35）。スクリプトでボタンを足すときも同じ形にして $p.apply() を呼ぶと、既存のボタンと同じ見た目になります。
$('#MainCommands').append(
$('<button>', {
type: 'button',
class: 'button button-icon button-positive',
'data-icon': 'ui-icon-circle-check',
text: '確定'
})
);
$p.apply(); // 未適用（.applied が無い）の要素に jQuery UI を適用するMaterial Symbols
Google の Material Symbols の Web フォントで、Outlined・Rounded・Sharp の 3 種類が assets/plugins/material-symbols/index.css で定義されています（HtmlStyles.cs#L120）。要素の文字としてアイコン名を書くと、リガチャでアイコンになります。
<span class="material-symbols-outlined">content_copy</span>
<span class="material-symbols-sharp">settings</span>| クラス | 主な使用箇所 |
|---|---|
material-symbols-sharp | エディタの項目設定のボタン（MaterialIconButton()。塗りつぶしのときは is-fill クラスも付く）、日付項目の「現在日時」ボタン、おすすめガイド、Svelte のコンポーネント |
material-symbols-outlined | Markdown エディタのボタン（edit・edit_off・imagesmode・add_a_photo・content_copy）、コメントの操作ボタン、パスワードの表示切り替え、ダッシュボードのクイックアクセス、サイトメニューのサイト種別 |
エディタの項目一覧では、項目の種類に応じて次のアイコンが付きます（HtmlControls.cs#L1190-L1208）。
| 項目の種類 | アイコン |
|---|---|
| 基本項目 | apps |
| 分類 | text_fields |
| 数値 | timer_10 |
| 日付 | calendar_month |
| 説明 | edit_note |
| チェック | check |
| 添付ファイル | attach_file |
| リンク | add_link |
| セクション | h_mobiledata |
ダッシュボードのクイックアクセス
クイックアクセスのパーツは、サイトの種類に応じて Material Symbols（Outlined）のアイコンを出します（DashboardUtilities.cs#L1744-L1784）。
| 対象 | 既定のアイコン |
|---|---|
| フォルダ | folder |
| ダッシュボード | dashboard |
| Wiki | text_snippet |
| テーブル | table |
| URL の指定 | language |
クイックアクセスのサイトを JSON の配列で指定すると、項目ごとに Icon（Material Symbols のアイコン名）・Title・Css・ViewMode・OpenInNewTab を指定できます（DashboardPart.cs#L13-L22、#L399-L421）。JSON として読めなければ、カンマか改行で区切ったサイト ID の並びとして読みます。
[
{ "Id": "123", "Icon": "inventory_2", "Title": "在庫" },
{ "Url": "https://example.com/", "Icon": "help", "OpenInNewTab": true }
]SVG ファイル
wwwroot/images/ にあり、v2 テーマのナビゲーションメニューとサイト種別に使われます。
| ファイル | 使い道 |
|---|---|
icon-menu-new.svg | 新規作成メニュー |
icon-menu-view-mode.svg | 表示モードメニュー |
icon-menu-settings.svg | 管理メニュー |
icon-menu-help.svg | ヘルプメニュー |
icon-menu-account.svg | ユーザーメニュー |
icon-menu-backgroundjob.svg | バックグラウンドジョブのメニュー |
icon-menu-custom.svg | 追加したメニュー（すべて同じアイコン） |
icon-site-sites.svg | フォルダ |
icon-site-issues.svg | 期限付きテーブル |
icon-site-results.svg | 記録テーブル |
icon-site-wikis.svg | Wiki |
icon-site-dashboards.svg | ダッシュボード |
メニューのアイコンは HtmlNavigationMenu.cs でコンテナの ID ごとに固定で決まります（HtmlNavigationMenu.cs#L202-L227、#L334）。追加したメニューのアイコンを変える方法は ナビゲーションとテーマ にあります。icon-menu-backgroundjob.svg は 1.5.8.1 のソースにあり、1.5.1.0 にはありませんでした。
アイコンに関係する設定
| 設定 | 内容 |
|---|---|
General.json の HideCurrentUserIcon | ユーザー型の項目の横に出る「自分を選ぶ」アイコン（ui-icon-person）を出さない（既定 false。HtmlFields.cs#L664-L672） |
プロセスの Icon | プロセスのボタンに付ける jQuery UI のアイコンのクラス名。空なら ui-icon-disk（HtmlProcess.cs#L47-L49） |
クイックアクセスの Icon | Material Symbols のアイコン名（上記） |
jQuery UI のアイコンを Material Symbols に揃える改修の検討は 画面のアイコンを Material Symbols に揃える にあります。