Using icon/image that was imported in a seperate SCSS file - sass

Question

I need to use a magnifying glass icon in the left of an input field, problem is that all of the icons are imported in a separate SCSS file. How can I use these icons in the search field?
The start of the icons.scss file:
#font-face {
font-family: "app";
src:url("../fonts/app.eot");
src:url("../fonts/app.eot?#iefix") format("embedded-opentype"),
url("../fonts/app.woff2") format("woff2"),
url("../fonts/app.woff") format("woff"),
url("../fonts/app.ttf") format("truetype"),
url("../fonts/app.svg#app") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "app" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "app" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
And the Icon from the file that i want to use:
.icon-search:before{
content: "\43";
}
The search SCSS that i want to use the icon in:
.search-div{
padding: 8px 5px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
overflow: hidden;
.ato-search-bar{
//Code here for the background icon
}
}
I have imported the icons scss into my other file, but not sure where to go from there.

Answer 1

You need to use the #extend directive. That means that you will extend your selector with some other selector properties. The extended class will have all the properties of the original class. The #extend directive will alsi extends all the defined pseudo selectors.
// In your icons.scss file
.icon-search:before{
content: "\43";
}
// Later in you css (remember to import icons.scss using: #import "icons";
.search-div{
padding: 8px 5px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
overflow: hidden;
.ato-search-bar{
#extend .icon-search; // Extends the icon class
}
}
Will compile into:
.icon-search:before,
.search-div .ato-search-bar:before {
content: "\43";
}
.search-div {
padding: 8px 5px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
overflow: hidden;
}
Hope it helps.