How to add an icon to a TextInput?

[push-and-pop]

like this

thank your help

[yusdacra]

You can use the icons from iced_aw, and use the Row widget to put an icon before your text input.

Example (might not compile):

let icon = Text::new(Icon::Lock);
let text_input = /* create text input */;
let row = Row::with_children(vec![icon.into(), text_input.into()]);

[0x57e11a]

I've been having trouble getting icon buttons to work, I have

// top of file
use iced_aw::{
    graphics::icons::*,
    ICON_FONT,
};

// inside view fn
Button::new(
        &mut self.btn_open_document,
        Text::new(icon_to_char(Icon::JournalArrowUp)).font(ICON_FONT),
    )
    .on_press(Message::Option(Action::OpenDocument)),

But an error pops up on .font(ICON_FONT):

the trait bound `Font: From<iced_core::font::Font>` is not satisfied
required because of the requirements on the impl of `Into<Font>` for `iced_core::font::Font`rustcE0277

I have no idea how to fix this and frankly I'm getting tired of trying.

[yusdacra]

That sounds like a version mismatch between the iced version you use and iced_aw uses. Could you show your iced and iced_aw dependencies?

[Kaiden42]

The current stable version of iced_aw on the main branch is only compatible with iced 0.3.0. There exists a beta branch for the currently unstable version of iced pointing to rev = "4994d34abab" of the master branch of iced. Please make sure that these versions match. If you are using the latest version of the master branch of iced (rev = "4d4c61b"), I could take a look into updating the beta branch of iced_aw.

Nevertheless, please keep in mind that the icons on iced_aw are some kind of quick-start feature for playing around with ~1200 icons. For a finished application I recommend of using your own minimal icon font that only contains the icons you are needing. You can find all icons that are used by iced_aw on the bootstrap icon collection. Just download the SVG file of the icons you need.

Since Iced is using the text renderer for rendering icons, you need to create a font. A font can be easily created from SVG files using fantasticon or any other software for creating fonts out of SVGs. I've found fantasticon to be pretty easy as you can simply use a config file. When you have all icons in a directory, let's call it svg than you can use a config file like this to create your font:

module.exports = {
    inputDir: './svg',
    outputDir: '.',
    fontTypes: ['ttf'],
    assetTypes: [],
    name: 'my-own-icons',
    codepoints: {
        "arrow-clockwise": 4000,
        "arrow-left": 4010,
        "backspace": 4020,
        "caret-down": 4030,
        "caret-right": 4040
    }
}

The codepoints in the config is a mapping from the file name of the icon (without file extension) and the codepoint you want to use in your application (in decimal). You can use whatever codepoint you like. To use for example the icon arrow-clockwise in your application simply use the character '\u{0FA0}' (in hex).

You can take a look at here and here on how iced_aw is importing and using the icon font as an example.

If you don't like to have NPM installed (like me) and if you are familiar with docker, I could give you the dockerfile I'm using to create a docker image of fanstasticon.

[0x57e11a]

I am indeed using the latest version of iced master branch, here's a chunk of my Cargo.toml

iced = { git = "https://github.com/iced-rs/iced", branch = "master" }
iced_native = { git = "https://github.com/iced-rs/iced", branch = "master" }
iced_aw = { git = "https://github.com/iced-rs/iced_aw", branch = "beta", features = ["icons"] }

and from Cargo.lock

[[package]]
name = "iced"
version = "0.3.0"
source = "git+https://github.com/iced-rs/iced?branch=master#569aff331f4fd4e9ead1866f56a8a7170de4b7a5"
dependencies = [
 "iced_core 0.4.0 (git+https://github.com/iced-rs/iced?branch=master)",
 "iced_futures 0.3.0 (git+https://github.com/iced-rs/iced?branch=master)",
 "iced_web 0.4.0 (git+https://github.com/iced-rs/iced?branch=master)",
 "iced_wgpu",
 "iced_winit",
 "thiserror",
]

[[package]]
name = "iced_aw"
version = "0.1.0"
source = "git+https://github.com/iced-rs/iced_aw?branch=beta#a52b1f72490297b3d1695328774406718ccb9201"
dependencies = [
 "chrono",
 "dodrio",
 "iced_graphics 0.2.0 (git+https://github.com/hecrj/iced.git?rev=4994d34abab)",
 "iced_native 0.4.0 (git+https://github.com/hecrj/iced.git?rev=4994d34abab)",
 "iced_style 0.3.0 (git+https://github.com/hecrj/iced.git?rev=4994d34abab)",
 "iced_web 0.4.0 (git+https://github.com/hecrj/iced.git?rev=4994d34abab)",
 "lazy_static",
 "wasm-bindgen",
 "web-sys",
]

[push-and-pop]

thank you