avatar
icon svg website in AEM AEM

> Structure of Frontend Site

ui.frontend
  dist
  node
  node_modules
  src
    author
    core
      components
        account
        content
          dashboard-comps-aem
            .ts
            .pcss
      globals
      postCss
        variables
          icons.pcss
        base.pcss
      resources
        fonts
        icons
          circle-question-icon.svg

> Icon SVG for Example:

<svg width="26" height="26" fill="#FFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"/>
</svg>

> Update icons.pcss:

@svg-load circle-question-icon url("circle-question-icon.svg") {
    fill: $color-blue;
}

> Update base.pcss:

/* Variables */

@import "variables/breakpoints.pcss";
@import "variables/colors.pcss";
@import "variables/fonts.pcss";
@import "variables/icons.pcss";

/* Styles */
@import "styles/styles.pcss";

/* Typography */
@import "typography/typography.pcss";

/* Elements */
@import "elements/global/global.pcss";

/* Components */
@import "components.pcss";

> Create class CSS for Style:

.flagtick-icon {
    display: block;
    position: relative;

    &::before {
        background-repeat: no-repeat !important;
        background-size: cover;
        content: '';
        display: block;
    }
    
    &--circle-question-icon {
       &::before {
          background-image: svg-inline(circle-question-icon);
       }
    }
}

> Update Icon into AEM component with generate HTML from JS function

.icon-membership {
    background-image: svg-inline(circle-question-icon);
    display: inline-block;
    height: 26px;
    width: 26px;
}
Note: Be sure that width and height = 26px which are the same with circle-question-icon.svg.
You need to login to do this manipulation!