Problem adding some svg icons in my angular application-CodePudding

I'm adding some icons I've designed in Figma to my web application. But I have some icons that work perfectly and some not. I add the icons in the following way:

.dx-icon-info {
  mask-image: url('../../../assets/images/grid/info.svg') !important;
  -webkit-mask-image: url('../../../assets/images/grid/info.svg') !important;
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-size: cover;
  mask-size: cover;
  color: $iconsBlue !important;
}

and the svg code is as follows:

    <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M30.4406 15C30.4406 23.0097 23.9479 29.5005 15.9414 29.5005C7.93494 29.5005 1.44219 23.0097 1.44219 15C1.44219 6.99034 7.93494 0.499469 15.9414 0.499469C23.9479 0.499469 30.4406 6.99034 30.4406 15Z" fill="#586BA4" stroke="#586BA4"/>
    <path d="M17.2381 20.7241C17.2515 21.0041 17.4048 21.1774 17.6981 21.2441L18.0381 21.3041C18.3315 21.3707 18.4781 21.5307 18.4781 21.7841C18.4781 22.0374 18.3115 22.1641 17.9781 22.1641H14.2981C13.9648 22.1641 13.7981 22.0374 13.7981 21.7841C13.7981 21.5441 13.9515 21.3907 14.2581 21.3241L14.6581 21.2441C14.9515 21.1774 15.1048 21.0041 15.1181 20.7241V17.1841C15.1181 16.9174 15.1181 16.6774 15.1181 16.4641C15.1181 16.2507 15.1115 16.0507 15.0981 15.8641C15.0848 15.7574 15.0781 15.6507 15.0781 15.5441C15.0781 15.4374 15.0781 15.3307 15.0781 15.2241C15.0515 14.9174 14.8915 14.7441 14.5981 14.7041L14.1181 14.6441C13.8115 14.6041 13.6581 14.4641 13.6581 14.2241C13.6581 14.0107 13.7915 13.8507 14.0581 13.7441L16.6581 12.8041C16.7248 12.7774 16.7848 12.7574 16.8381 12.7441C16.8915 12.7307 16.9448 12.7241 16.9981 12.7241C17.0648 12.7241 17.1181 12.7441 17.1581 12.7841C17.2515 12.8641 17.2981 13.0241 17.2981 13.2641L17.2381 15.5441V20.7241ZM16.1581 10.8441C15.7315 10.8441 15.3781 10.7174 15.0981 10.4641C14.8315 10.2107 14.6981 9.87739 14.6981 9.46406C14.6981 9.05073 14.8315 8.7174 15.0981 8.46406C15.3781 8.21073 15.7315 8.08406 16.1581 8.08406C16.5715 8.08406 16.9115 8.21073 17.1781 8.46406C17.4581 8.7174 17.5981 9.05073 17.5981 9.46406C17.5981 9.87739 17.4581 10.2107 17.1781 10.4641C16.9115 10.7174 16.5715 10.8441 16.1581 10.8441Z" fill="white"/>
    </svg>

But for example if I use this svg or similar I can't get it to display correctly.

<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.4406 15C30.4406 23.0097 23.9479 29.5005 15.9414 29.5005C7.93495 29.5005 1.44219 23.0097 1.44219 15C1.44219 6.99034 7.93495 0.499469 15.9414 0.499469C23.9479 0.499469 30.4406 6.99034 30.4406 15Z" fill="#586BA4" stroke="#586BA4"/>
<g clip-path="url(#clip0_1237_8532)">
<path d="M16 7.66406C11.86 7.66406 8.5 11.0241 8.5 15.1641C8.5 19.3041 11.86 22.6641 16 22.6641H22C22.825 22.6641 23.5 21.9891 23.5 21.1641V15.1641C23.5 11.0241 20.14 7.66406 16 7.66406ZM16 21.1641C13.8325 21.1641 11.9275 20.0091 10.8775 18.2841L13.09 16.0716L15.5575 18.1641L19 14.7291V15.9141H20.5V12.1641H16.75V13.6641H17.935L15.475 16.1241L13 14.0391L10.2325 16.8141C10.0825 16.2891 10 15.7341 10 15.1641C10 11.8566 12.6925 9.16406 16 9.16406C19.3075 9.16406 22 11.8566 22 15.1641C22 18.4716 19.3075 21.1641 16 21.1641ZM21.625 21.5391C21.2125 21.5391 20.875 21.2016 20.875 20.7891C20.875 20.3766 21.2125 20.0391 21.625 20.0391C22.0375 20.0391 22.375 20.3766 22.375 20.7891C22.375 21.2016 22.0375 21.5391 21.625 21.5391Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1237_8532">
<rect width="18" height="18" fill="white" transform="translate(7 6.16406)"/>
</clipPath>
</defs>
</svg>

Can someone tell me what I am doing wrong?

CodePudding user response：

Remove relative path so leave mask-image: url('/assets/images/grid/info.svg') !important;

and in angular.json add proper mapping for assets

See angular docs: https://angular.io/guide/workspace-config#asset-config

CodePudding user response：

looks like you forgot to modify angular.json, check docs: https://angular.io/guide/workspace-config#asset-config