Font Awesome Icons not sized correctly when used with Leaflet - leaflet

Question

I have a codepen at https://codepen.io/ericg_off/pen/RwMLEmX which demonstrates the issue.
I am trying to use FontAwesome icons with leaflet, but there appears to be nuances to how the fa css is defined that does not play well with leaflet.
For example, the SVG will not be sized or constrained by the html element that contains it.
What needs to be changed so the icon can be sized and constrained by the L.divIcon that contains it?
HTML
<div id="map"></div>
CSS
#map {
height: 100vh;
}
.my-icons {
background-color: rgba(0, 255, 0, 1.0);
}
JS
var map = L.map("map", {
center: [38, -77],
zoom: 5
});
// Create a Tile Layer and add it to the map
var tiles = new L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'© OpenStreetMap contributors',
minZoom: 3,
maxZoom: 9
}
).addTo(map);
divIcon = L.divIcon({
html: '<i class="fab fa-google"></i>',
className: "my-icons",
iconSize: [20, 20]
});
const markerLayer = L.layerGroup().addTo(map);
const lineLayer = L.layerGroup().addTo(map);
const from = [38, -77];
const to = [38, -100];
const fromMarker = L.marker(from, {
icon: divIcon
}).addTo(lineLayer);
const line = L.polyline([from, to], { color: "green", weight: 1 }).addTo(
markerLayer
);

Answer 1

If you need your FontAwesome icon to grow/shrink according to its parent container, you can use height:100% and a max-with:100% instead of em (font-size related):
Overriding css
/* center align svg elements */
.leaflet-marker-icon {
text-align: center;
}
/* scale icon to parent height - set a max-width to preventoverflows */
.svg-inline--fa {
display: inline-block;
font-size: inherit;
width: auto!important;
height: 100%!important;
overflow: visible;
max-width: 100%;
}
Example
var map = L.map("map", {
center: [38, -77],
zoom: 5
});
// Create a Tile Layer and add it to the map
var tiles = new L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'© OpenStreetMap contributors',
minZoom: 3,
maxZoom: 9
}
).addTo(map);
divIcon = L.divIcon({
html: '<i class="fab fa-google"></i>',
className: "my-icons",
iconSize: [20, 32]
});
const markerLayer = L.layerGroup().addTo(map);
const lineLayer = L.layerGroup().addTo(map);
const from = [38, -77];
const to = [38, -100];
const fromMarker = L.marker(from, {
icon: divIcon
}).addTo(lineLayer);
const line = L.polyline([from, to], { color: "green", weight: 1 }).addTo(
markerLayer
);
#map {
height: 100vh;
}
.my-icons {
background-color: rgba(0, 255, 0, 1);
}
/* center align svg elements */
.leaflet-marker-icon {
text-align: center;
}
/* scale icon to parent height - set a max-width to avoid overflows */
.svg-inline--fa {
display: inline-block;
font-size: inherit;
width: auto!important;
height: 100%!important;
overflow: visible;
max-width: 100%;
}
<link href="https://unpkg.com/leaflet#1.8.0/dist/leaflet.css" rel="stylesheet"/>
<script src="https://pro.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://unpkg.com/leaflet#1.8.0/dist/leaflet.js"></script>
<div id="map"></div>