search icon
Close
Chapters
Desktop UI

Icon

This library comes with own set of icons you can use in dui-button, dui-input and dui-icon. All icons are available as SVGs and are compiled to a font file you should import in your angular config.

See Generate section for more information on how to add your own icons.

color-theme
PreviewHTML
flagflagflag
flagMy buttonMy ButtonflagcheckCheckstarStar
flagMy buttonMy Buttonflag
garbageflaggarbageflag
flag
zoom-to-fit Clickable icon
12
arrows
15_text-format-bold15_text-format-italic15_text-format-underline15_text-format-strikethrough15_text-format-align-left15_text-format-align-center15_text-format-align-right

API <dui-icon>(source)

searchclear
Name
Description 
@Input() name: string
The icon for this button. 
@Input() clickable?: boolean
Enables interactive style for this icon. 
@Input() color?: string
The color of the icon. If not set, it will use `currentColor` by default. 
@Input() disabled?: boolean
If true, the icon will be disabled and not clickable. 
@Input() size?: number
The icon size (default 17). Should not be necessary usually.

Icons available

These icons can be used right away.

filterclear
15_text-format-align-center
15_text-format-align-center
15_text-format-align-left
15_text-format-align-left
15_text-format-align-right
15_text-format-align-right
15_text-format-bold
15_text-format-bold
15_text-format-bullets
15_text-format-bullets
15_text-format-code
15_text-format-code
15_text-format-indent
15_text-format-indent
15_text-format-italic
15_text-format-italic
15_text-format-strikethrough
15_text-format-strikethrough
15_text-format-underline
15_text-format-underline
15_text-format-unindent
15_text-format-unindent
add
add
archive
archive
arrow-small-down
arrow-small-down
arrow-small-left
arrow-small-left
arrow-small-right
arrow-small-right
arrow-small-up
arrow-small-up
arrow
arrow
arrow_down
arrow_down
arrow_left
arrow_left
arrow_right
arrow_right
arrow_up
arrow_up
arrows
arrows
check
check
clear
clear
color-theme
color-theme
comment
comment
compare
compare
download
download
drag
drag
edit
edit
envelop
envelop
eye
eye
filter
filter
flag
flag
folder
folder
garbage
garbage
gnome_close
gnome_close
gnome_maximize
gnome_maximize
gnome_minimize
gnome_minimize
help
help
list
list
play
play
record
record
reload
reload
remove
remove
search
search
settings
settings
share
share
star
star
times
times
toggle-sidebar
toggle-sidebar
toggle_bottom
toggle_bottom
toggle_left
toggle_left
toggle_right
toggle_right
toggle_sidebar
toggle_sidebar
triangle_down
triangle_down
triangle_right
triangle_right
zoom-to-fit
zoom-to-fit

Add own icons

To add additional icons to the set above you need to define each icon as SVG and put it all in one folder. The name of the svg file will be the name of your icon.

The structure should look like that 
src/assets/icons
├── cluster.svg
├── dashboard.svg
├── dataset.svg
├── experiment_detail.svg
├── file.svg
├── logo.svg
├── plus.svg
├── projects.svg
└── settings.svg
└── 15_text-format-code.svg
 Note: All icons are per default 17x17 px. Some are 15x15 px, but dui-icon uses per default 17px. If you have different sized icons than 17x17 px you should strongly prefix those with the size. For example, our 15x15 px icons are named 15_text-format-bold, 15_text-format-code etc. Dui-icon automatically detects the size on that prefix. If you don't provide a prefix it uses 17px which only works correctly with 17x17 pixels, all other sizes will appear blurry. Optionally, you can specify on each dui-icon a size input, but that is not recommended since that requires you to constantly think about the actual size of the icon, instead of the icon telling you on what pixel raster it works best. So, long story short: Use a prefix if not 17x17 px.

Generate font

To generate then your custom icon font set, you simply have to call 
node node_modules/@deepkit/desktop-ui/bin/create-font.js src/assets/icons
 You'll see a list of all base icons (from this library) and all your newly added icons. You can call this as often as you add new icons to your icon folder. Don't forget to git commit your svg files, so they don't get lost. The create-font.js file generates in src/assets/fonts/ your new font files which you should import in your css: 
@font-face {
    font-family: 'Desktop UI icon Mono';
    src: url("./assets/fonts/ui-icons.svg") format('svg'), url("./assets/fonts/ui-icons.woff") format('woff'), url("./assets/fonts/ui-icons.ttf") format('ttf');
    font-weight: normal;
    font-style: normal;
}

.ui-icon {
    font-family: 'Desktop UI icon Mono' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 17px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}