Enhancing Power Apps with SVG Icons

Introduction

• Speaker: Robin
• Topic: Making Power Apps visually appealing using a component library and SVG icons.
• Collaboration with Louisa on the template creation.
• Template is free to use.
• Link to GitHub repository available for download.

Component Library and Template

• Template serves as a starting point for Power Apps canvas apps.
• Designed to work with modern controls which will be fully available in a few months.

SVG Icon Techniques

• The template simplifies the use of SVG icons:
  • Icons change color automatically based on selected color schemes.
  • No color property is required in the SVG code for this to work.

Finding SVG Icons

• Icons can be sourced from:
  • pictogram.svg
  • Other sources like Fluent Icons and Font Awesome.

Example Usage

• Demonstrated using a Cowboy head icon.
• Steps to implement SVG:
  1. Download the SVG code.
  2. Replace all double quotes with single quotes (important for Power Apps).
  3. Use a wrapper code to insert SVG into Power Apps.

Color Matching with SVG Icons

• To match colors with the app's color scheme:
  • Use the fill property in the SVG.
  • Reference the app's primary color stored in defaults.primaryColorHex.

Setting Up Colors

• Define color in the app’s OnStart property.
  • Calculate hex value of the color to use in SVG.

Storing Icons in Named Formulas

• Icons can be stored in named formulas for easier management:
  • Create a named formula for the icon (e.g., CowboyIcon).
  • Substitute the SVG string to change icons without duplicating code.

Conclusion

• Encouraged to try the template and component library.
• Feedback is appreciated for further improvements.