画面のアイコンを Material Symbols に揃える
第1版作成 最終更新 （日本時間）
確認バージョン1.5.1.01.5.8.1
プリザンターの画面では、jQuery UI のアイコン（CSS スプライト）と Material Symbols（Web フォント）が混ざっています（画面のアイコン）。新しい部品は Material Symbols を使っているので、jQuery UI のアイコンも Material Symbols に揃える場合の設計メモです。本体の標準機能ではありません。 調査は 1.5.1.0 で行い、使われているアイコンの種類を 1.5.8.1 のソースで数え直しています。
改修の範囲
| 対象 | 範囲 | 内容 |
|---|---|---|
| C#（サーバー） | *Utilities.cs を中心に多数（1.5.1.0 で約 600 か所、52 種類） | icon: "ui-icon-…" の指定。HtmlControls.Icon() とコマンドボタンの icon の出力を Material Symbols 用に変えれば、多くは 1 か所の改修で済む |
| JavaScript | attachments.js・expand.js・calendar.js・kambanevents.js・basket.js・message.js・jqueryui.js など（1.5.1.0 で 15 か所） | クラス名を組み立てている箇所の置き換え |
| SCSS | style.scss・style-responsive.scss・legacy.scss・legacy-responsive.scss（1.5.1.0 で 37 か所） | ui-icon-* を指定したスタイル。フォントに変わるので font-size・vertical-align などの調整も要る |
| 描画の方式 | — | スプライトの背景画像から、文字（リガチャ）への変更。要素の中にアイコン名の文字を入れる必要がある |
ui-icon-* のクラスは jQuery UI のウィジェット（ダイアログの閉じるボタン、メニューの矢印など）も内部で使うため、jQuery UI 自体の CSS をどうするかも決める必要があります。
対応表
| jQuery UI | Material Symbols の候補 | 意味 |
|---|---|---|
ui-icon-arrowrefresh-1-s | （1.5.8.1 で増えたもの。未検討） | 再読み込み |
ui-icon-arrowreturnthick-1-e | redo | やり直し |
ui-icon-arrowreturnthick-1-n | publish | 上へ戻る |
ui-icon-arrowreturnthick-1-w | undo | 戻る |
ui-icon-arrowthickstop-1-n | vertical_align_top | 先頭へ |
ui-icon-arrowthickstop-1-s | vertical_align_bottom | 末尾へ |
ui-icon-calendar | calendar_month | カレンダー |
ui-icon-cancel | cancel | キャンセル |
ui-icon-check | check | チェック |
ui-icon-circle-arrow-n | arrow_circle_up | 上 |
ui-icon-circle-arrow-w | arrow_circle_left | 左 |
ui-icon-circle-check | check_circle | 確定 |
ui-icon-circle-close | cancel | 閉じる（丸） |
ui-icon-circle-triangle-e | arrow_circle_right | 右へ |
ui-icon-circle-triangle-n | arrow_circle_up | 上へ |
ui-icon-circle-triangle-s | arrow_circle_down | 下へ |
ui-icon-circle-triangle-w | arrow_circle_left | 左へ |
ui-icon-circle-zoomin | zoom_in | 拡大 |
ui-icon-clock | schedule | 時刻 |
ui-icon-close | close | 閉じる |
ui-icon-closethick | close | 閉じる（太） |
ui-icon-contact | badge | 組織 |
ui-icon-copy | content_copy | コピー |
ui-icon-disk | save | 保存 |
ui-icon-extlink | open_in_new | 外部リンク |
ui-icon-folder-open | folder_open | フォルダ |
ui-icon-gear | settings | 設定 |
ui-icon-image | image | 画像 |
ui-icon-info | info | 情報 |
ui-icon-key | key | 鍵 |
ui-icon-link | link | リンク |
ui-icon-mail-closed | mail | メール |
ui-icon-minusthick | remove | マイナス |
ui-icon-notice | warning | 警告 |
ui-icon-pencil | edit | 編集 |
ui-icon-person | person | ユーザー |
ui-icon-play | play_arrow | 再生 |
ui-icon-plus | add | 追加 |
ui-icon-plusthick | add | 追加（太） |
ui-icon-power | power_settings_new | ログアウト |
ui-icon-refresh | refresh | 再読み込み |
ui-icon-search | search | 検索 |
ui-icon-seek-next | skip_next | 次へ |
ui-icon-seek-prev | skip_previous | 前へ |
ui-icon-transferthick-e-w | swap_horiz | 左右の入れ替え |
ui-icon-trash | delete | 削除 |
ui-icon-triangle-1-e | arrow_right | 右三角 |
ui-icon-triangle-1-n | arrow_drop_up | 上三角 |
ui-icon-triangle-1-s | arrow_drop_down | 下三角 |
ui-icon-unlocked | lock_open | 解錠 |
ui-icon-video | videocam | 動画 |
ui-icon-Crosstab | pivot_table_chart | クロス集計（jQuery UI にも CSS にも定義が無い） |