Add different icons in Flutter

Question

I am developing my own app in Flutter and I want to use some icons that I've made from my own. I have used some of the icons provided by font_awesome_flutter but at this point of my code I would like to add some other icons ( svgs or pngs) which are not included in this package to make it more personal.

This is how my app organization it is:
Code organization

And that is the part of the code where I want to implement my own picture upct.png:

    class _Encabezado extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        IconHeader(
          icon: FontAwesomeIcons.glasses, 
          //icon2: FontAwesomeIcons.university, 
          icon2: SvgPicture.asset('assets/svgs/upct.svg'),
          titulo: 'UPCT VR 360 EXPERIENCE', 
          subtitulo: 'Universidad Politécnica de Cartagena',
          color1: Color(0xff536CF6),
          color2: Color(0xff66A9F2),
        ),

Thank you very much!

Does this answer your question? [How to add image in Flutter](https://stackoverflow.com/questions/50903106/how-to-add-image-in-flutter) — ibhavikmakwana, Feb 21 '22 at 12:15

score 0 · Answer 1 · answered Feb 21 '22 at 11:55

0

If you want to use local asset folder images need to add the base path in pubspec.yaml

Example:

flutter:

  assets:
    - assets/svgs/

Note: add base path under flutter

answered Feb 21 '22 at 11:55

nagendra nag

1,142
2
15

I have this added, but appears me an error when I try to implement in the terms as I have done – Ignacio Castellanos Moreno Feb 21 '22 at 12:59
can you please share the error that you are getting? – nagendra nag Feb 21 '22 at 14:20
@IgnacioCastellanosMoreno not able to see your error....can you post it? or update the error in the question – nagendra nag Feb 21 '22 at 16:57

Raouf Rahiche · Answer 2 · 2022-02-21T14:40:47.300

0

For SVGs Use https://www.fluttericon.com to convert your SVGs into a font file, download the result folder and import the font in your pubspec.yaml

flutter:
  fonts:
    - family:  MyFlutterApp
      fonts:
        - asset: fonts/MyFlutterApp.ttf

edited Feb 21 '22 at 14:40

answered Feb 21 '22 at 13:01

Raouf Rahiche

28,948
10
85
77

I have done the fluttericon folder, and I had an assets folder into the project, should I place it there or in another path? Because I am getting a pubspec.yaml error. Thanks!! – Ignacio Castellanos Moreno Feb 21 '22 at 14:15
What error are you getting ? I just updated the code to have the right spaces so try again – Raouf Rahiche Feb 21 '22 at 14:40
The thing is that I dont know really well where I should put the fodler that I have created. If you see the first image that i posted, in which level of folders should I place it? Because I put in my `pubspec.yaml` what you wrote but I didn't obtain anything, I cannot import it, or I don't know where it goes – Ignacio Castellanos Moreno Feb 21 '22 at 17:16

Add different icons in Flutter

2 Answers2