UI 图标¶

Odoo 的 UI 依赖两个图标系统：

Material Symbols （Google Fonts）是主要图标库。它覆盖了绝大部分界面需求。
Odoo UI Icons (OI) 是 Material Symbols 中不可用图标的补充库——自定义视图图标、品牌标识（如 Facebook、GitHub）以及其他 Odoo 专有字形。

两个系统共用相同的 .oi 基础类，并通过 data-icon 属性指定要渲染的图标。

Material Symbols¶

Material Symbols Rounded 在 Odoo 的 webclient 中已加载。可用于任何标准图标：操作、导航、状态指示器等。

将图标的连字名称（ligature，参见 fonts.google.com/icons）传入 data-icon 属性：

Example

<i class="oi" data-icon="check"/>
<i class="oi" data-icon="settings"/>
<i class="oi" data-icon="arrow_forward"/>

使用 Material Symbols library 或 Odoo 媒体库（见下文）浏览并搜索可用图标。

注解

Odoo 仅打包了 Material Symbols 的一个子集，而非完整库。受支持的图标列表维护在 odoo/addons/web/tooling/icons/icons_wishlist.txt 中。

Odoo UI 图标¶

OI 库涵盖 Material Symbols 中不可用的图标：品牌标识、自定义看板视图图标以及其他 Odoo 专有字形。OI 图标在 data-icon 属性中使用 oi_ 前缀：

Example

<i class="oi" data-icon="oi_odoo"/>
<i class="oi" data-icon="oi_view-kanban"/>
<i class="oi" data-icon="oi_facebook"/>

与 Material Symbols library 类似，Odoo 自定义图标可通过 Odoo 媒体库获取。

Odoo

oi_odoo

oi_studio

oi_view-kanban

oi_view-pivot

oi_view-cohort

oi_app_documents

oi_threads

Social

oi_bandcamp

oi_behance

oi_behance-square

oi_bluesky

oi_deviantart

oi_digg

oi_discord

oi_dribbble

oi_facebook

oi_facebook-square

oi_flickr

oi_foursquare

oi_google-plus

oi_imdb

oi_instagram

oi_kickstarter

oi_lastfm

oi_linkedin

oi_linkedin-square

oi_medium

oi_meetup

oi_mixcloud

oi_odnoklassniki

oi_pinterest

oi_pinterest-square

oi_product-hunt

oi_qq

oi_quora

oi_reddit

oi_reddit-square

oi_skype

oi_slack

oi_snapchat

oi_soundcloud

oi_spotify

oi_steam

oi_strava

oi_telegram

oi_tiktok

oi_tumblr

oi_twitch

oi_vimeo

oi_vk

oi_weibo

oi_whatsapp

oi_x

oi_x-square

oi_xing

oi_yelp

oi_youtube

oi_youtube-play

oi_youtube-square

Technologies

oi_amazon

oi_android

oi_angellist

oi_apple

oi_bitbucket

oi_bitbucket-square

oi_chrome

oi_codepen

oi_creative-commons

oi_css3

oi_dropbox

oi_drupal

oi_edge

oi_git

oi_github

oi_github-square

oi_gitlab

oi_google

oi_google-play

oi_hacker-news

oi_html5

oi_joomla

oi_linux

oi_opera

oi_safari

oi_stack-overflow

oi_trello

oi_windows

oi_wordpress

oi_yahoo

Payment methods

oi_paypal

oi_cc-paypal

oi_cc-amex

oi_cc-diners-club

oi_cc-discover

oi_cc-jcb

oi_cc-mastercard

oi_cc-stripe

oi_cc-visa

RTL 适配¶

部分 OI 视图图标提供了 RTL 适配，当启用 RTL 语言时会将字形旋转 180°。Material Symbols 的方向性图标（箭头、V 形等）同样包含 RTL 适配；完整的列表请参见 icons.scss 中的 $ms-rtl-icons 列表。

工具类¶

以下工具类可与 .oi 组合使用：

oi-fw

固定宽度——用于在列表或菜单中对齐图标。

Example

<i class="oi oi-fw" data-icon="check"></i>

oi-spin

持续 360° 旋转（2 秒、线性）。适用于加载指示器。

Example

<i class="oi oi-spin" data-icon="progress_activity"></i>

oi-pulse

8 步脉冲式旋转（1 秒）。作为 oi-spin 的阶梯动画替代方案。

Example

<i class="oi oi-pulse" data-icon="progress_activity"></i>

oi-filled

默认情况下，Material Symbols 以轮廓样式渲染。添加 oi-filled 可渲染图标的填充变体。

Example

<i class="oi oi-filled" data-icon="favorite"></i>

Size classes

oi-lg、oi-2x … oi-10x 相对于当前字体大小缩放图标。

Example

<i class="oi oi-2x" data-icon="check"></i>

CSS variables

图标的渲染可通过 CSS 自定义属性调整：

--oi-font-size——覆盖图标的字体大小。

通过 CSS 设置图标

若要直接从 CSS 设置图标字形（而非通过 data-icon 属性），请使用图标的连字名称作为 content 值。要使用填充变体，请在名称后追加 _f。

Example

/* Outline variant */
.my-element::before { content: "favorite"; }

/* Filled variant */
.my-element::before { content: "favorite_f"; }

从 Font Awesome 迁移¶

Font Awesome 已被 Material Symbols 取代，作为主要图标系统。临时的兼容性映射将遗留的 fa-* 类名翻译为对应的 Material Symbols 或 OI 等价类名，因此现有代码无需立即修改即可继续渲染。完整的等价映射见 fa_to_ms.scss 与 oi_to_ms.scss 映射文件。

Example

应用兼容性映射后，以下两者等价：

<!-- Legacy (Font Awesome) -->
<i class="fa fa-check"></i>

<!-- New system -->
<i class="oi" data-icon="check"></i>

重要

兼容性映射是临时的，迁移完成后将被移除。请尽快将用法更新为新系统。

迁移步骤：

将 class="fa fa-<name>" 替换为 class="oi" data-icon="<ms-name>"，其中 <ms-name> 是对应的 Material Symbols ligature name。
对于 Material Symbols 中不可用的图标（品牌、Odoo 自定义字形），使用 OI 库：class="oi" data-icon="oi_<name>"。
移除所有 fa-* 尺寸类（如 fa-2x），替换为等价的 oi-* 尺寸类。

Odoo 电子表格图标¶

Odoo Spreadsheet 的图标定义为 <svg> 元素，并使用 QWeb templates （模板）渲染。

Example

<t t-name="o-spreadsheet-Icon.GLOBAL_FILTERS">
    <svg width="20" height="20" viewbox="0 0 20 20">
        <path fill="currentColor" d="M1 3h12L7 9M5.5 6h3v11l-3-3M14 4h4v2h-4m-3 3h7v2h-7m0 3h7v2h-7"/>
    </svg>
</t>

SEE_RECORDS

GLOBAL_FILTERS

NEW

COPY_FILE

SAVE

VERSION_HISTORY

CAMERA

DOWNLOAD_AS_JSON

ADD_TO_DASHBOARD

ODOO_LIST

INSERT_LIST

REFRESH_DATA

COMMENTS

LINE_CHART

STACKED_LINE_CHART

AREA_CHART

STACKED_AREA_CHART

COLUMN_CHART

STACKED_COLUMN_CHART

BAR_CHART

STACKED_BAR_CHART

COMBO_CHART

PIE_CHART

DOUGHNUT_CHART

SCATTER_CHART

GAUGE_CHART

SCORECARD_CHART

WATERFALL_CHART

POPULATION_PYRAMID_CHART

RADAR_CHART

FILLED_RADAR_CHART

GEO_CHART

FUNNEL_CHART

SUNBURST_CHART

TREE_MAP_CHART

CLEAR_AND_RELOAD

EXPORT_XLSX

OPEN_READ_ONLY

OPEN_DASHBOARD

OPEN_READ_WRITE

IMPORT_XLSX

UNDO

REDO

CUT

COPY_AS_IMAGE

PASTE

CLEAR

FREEZE

UNFREEZE

FORMULA

HIDE_ROW

UNHIDE_ROW

HIDE_COL

UNHIDE_COL

INSERT_ROW

INSERT_ROW_BEFORE

INSERT_ROW_AFTER

INSERT_COL

INSERT_COL_AFTER

INSERT_COL_BEFORE

INSERT_CELL

INSERT_CELL_SHIFT_DOWN

INSERT_CELL_SHIFT_RIGHT

DELETE_CELL_SHIFT_UP

DELETE_CELL_SHIFT_LEFT

INSERT_DROPDOWN

INSERT_SHEET

PAINT_FORMAT

CONDITIONAL_FORMAT

CLEAR_FORMAT

BOLD

ITALIC

UNDERLINE

STRIKE

TEXT_COLOR

FILL_COLOR

MERGE_CELL

ALIGN_LEFT

ALIGN_CENTER

ALIGN_RIGHT

ALIGN_TOP

ALIGN_MIDDLE

ALIGN_BOTTOM

WRAPPING_OVERFLOW

WRAPPING_WRAP

WRAPPING_CLIP

BORDERS

BORDER_HV

BORDER_H

BORDER_V

BORDER_EXTERNAL

BORDER_LEFT

BORDER_TOP

BORDER_RIGHT

BORDER_BOTTOM

BORDER_CLEAR

BORDER_TYPE

BORDER_COLOR

BORDER_NO_COLOR

PLUS

MINUS

LIST

ARROW_DOWN

ARROW_UP

ARROW_RIGHT

SMILE

MEH

FROWN

GREEN_DOT

YELLOW_DOT

RED_DOT

SMALL_DOT_RIGHT_ALIGN

SORT_RANGE

FILTER_ICON

CHECK

NUMBER_FORMATS

FONT_SIZE

SPLIT_TEXT

DISPLAY_HEADER

COG

PLUS_IN_BOX

MINUS_IN_BOX

GROUP_ROWS

UNGROUP_ROWS

GROUP_COLUMNS

UNGROUP_COLUMNS

DATA_VALIDATION

THIN_DRAG_HANDLE

SHORT_THIN_DRAG_HANDLE

EDIT_TABLE

DELETE_TABLE

PAINT_TABLE

CIRCLE_INFO

PIVOT

INSERT_PIVOT

MOVE_SHEET_LEFT

MOVE_SHEET_RIGHT

RENAME_SHEET

CAROUSEL

在 GitHub 上编辑